76 lines
1.8 KiB
JavaScript
76 lines
1.8 KiB
JavaScript
(() => {
|
|
const HEADER_SELECTOR = '.app-header';
|
|
const HIDDEN_CLASS = 'app-header--hidden';
|
|
const MOBILE_BREAKPOINT = 960;
|
|
const SCROLL_THRESHOLD = 12;
|
|
|
|
let lastScrollY = window.scrollY || window.pageYOffset || 0;
|
|
let isHidden = false;
|
|
|
|
const header = document.querySelector(HEADER_SELECTOR);
|
|
if (!header) {
|
|
return;
|
|
}
|
|
|
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
|
|
const shouldEnable = () => window.innerWidth <= MOBILE_BREAKPOINT && !prefersReducedMotion.matches;
|
|
|
|
const showHeader = (force = false) => {
|
|
if (isHidden || force) {
|
|
header.classList.remove(HIDDEN_CLASS);
|
|
isHidden = false;
|
|
}
|
|
};
|
|
|
|
const hideHeader = () => {
|
|
if (!isHidden) {
|
|
header.classList.add(HIDDEN_CLASS);
|
|
isHidden = true;
|
|
}
|
|
};
|
|
|
|
const handleScroll = () => {
|
|
const currentY = window.scrollY || window.pageYOffset || 0;
|
|
|
|
if (!shouldEnable() || currentY <= 0) {
|
|
showHeader(true);
|
|
lastScrollY = currentY;
|
|
return;
|
|
}
|
|
|
|
const delta = currentY - lastScrollY;
|
|
|
|
if (Math.abs(delta) <= SCROLL_THRESHOLD) {
|
|
lastScrollY = currentY;
|
|
return;
|
|
}
|
|
|
|
if (delta > 0) {
|
|
hideHeader();
|
|
} else {
|
|
showHeader();
|
|
}
|
|
|
|
lastScrollY = currentY;
|
|
};
|
|
|
|
const handleResize = () => {
|
|
lastScrollY = window.scrollY || window.pageYOffset || 0;
|
|
if (!shouldEnable()) {
|
|
showHeader(true);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
if (typeof prefersReducedMotion.addEventListener === 'function') {
|
|
prefersReducedMotion.addEventListener('change', handleResize);
|
|
} else if (typeof prefersReducedMotion.addListener === 'function') {
|
|
prefersReducedMotion.addListener(handleResize);
|
|
}
|
|
|
|
handleResize();
|
|
})();
|