91 lines
2.1 KiB
JavaScript
91 lines
2.1 KiB
JavaScript
/*
|
|
* Hide Header on scroll down
|
|
*/
|
|
|
|
$(function() {
|
|
const $searchInput = $("#search-input");
|
|
const delta = ScrollHelper.getTopbarHeight();
|
|
|
|
let didScroll;
|
|
let lastScrollTop = 0;
|
|
|
|
function hasScrolled() {
|
|
let st = $(this).scrollTop();
|
|
|
|
/* Make sure they scroll more than delta */
|
|
if (Math.abs(lastScrollTop - st) <= delta) {
|
|
return;
|
|
}
|
|
|
|
if (st > lastScrollTop ) { // Scroll Down
|
|
ScrollHelper.hideTopbar();
|
|
|
|
if ($searchInput.is(":focus")) {
|
|
$searchInput.blur(); /* remove focus */
|
|
}
|
|
|
|
} else { // Scroll up
|
|
// has not yet scrolled to the bottom of the screen, that is, there is still space for scrolling
|
|
if (st + $(window).height() < $(document).height()) {
|
|
|
|
if (ScrollHelper.hasScrollUpTask()) {
|
|
return;
|
|
}
|
|
|
|
if (ScrollHelper.topbarLocked()) { // avoid redundant scroll up event from smooth scrolling
|
|
ScrollHelper.unlockTopbar();
|
|
} else {
|
|
if (ScrollHelper.orientationLocked()) { // avoid device auto scroll up on orientation change
|
|
ScrollHelper.unLockOrientation();
|
|
} else {
|
|
ScrollHelper.showTopbar();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
lastScrollTop = st;
|
|
|
|
} // hasScrolled()
|
|
|
|
function handleLandscape() {
|
|
if ($(window).scrollTop() === 0) {
|
|
return;
|
|
}
|
|
ScrollHelper.lockOrientation();
|
|
ScrollHelper.hideTopbar();
|
|
}
|
|
|
|
if (screen.orientation) {
|
|
screen.orientation.onchange = () => {
|
|
const type = screen.orientation.type;
|
|
if (type === "landscape-primary" || type === "landscape-secondary") {
|
|
handleLandscape();
|
|
}
|
|
};
|
|
|
|
} else {
|
|
// for the browsers that not support `window.screen.orientation` API
|
|
$(window).on("orientationchange",() => {
|
|
if ($(window).width() < $(window).height()) { // before rotating, it is still in portrait mode.
|
|
handleLandscape();
|
|
}
|
|
});
|
|
}
|
|
|
|
$(window).scroll(() => {
|
|
if (didScroll) {
|
|
return;
|
|
}
|
|
didScroll = true;
|
|
});
|
|
|
|
setInterval(() => {
|
|
if (didScroll) {
|
|
hasScrolled();
|
|
didScroll = false;
|
|
}
|
|
}, 250);
|
|
|
|
});
|