84 lines
2.6 KiB
JavaScript
84 lines
2.6 KiB
JavaScript
// scroll-header.js
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const topBanner = document.querySelector('.top-banner');
|
|
const slideMenu = document.querySelector('.slide-menu');
|
|
|
|
if (!topBanner) return;
|
|
|
|
// Scroll threshold to trigger the shrink effect
|
|
const scrollThreshold = 50;
|
|
let isScrolled = false;
|
|
let isTransitioning = false;
|
|
let lastScrollY = 0;
|
|
let scrollDirection = 'down';
|
|
|
|
function updateHeaderState(scrolled) {
|
|
if (isTransitioning) return;
|
|
|
|
if (scrolled && !isScrolled) {
|
|
isTransitioning = true;
|
|
topBanner.classList.add('scrolled');
|
|
isScrolled = true;
|
|
|
|
if (slideMenu) {
|
|
slideMenu.style.top = '80px';
|
|
}
|
|
|
|
// Reset transition flag after animation completes
|
|
setTimeout(() => {
|
|
isTransitioning = false;
|
|
}, 250);
|
|
|
|
} else if (!scrolled && isScrolled) {
|
|
isTransitioning = true;
|
|
topBanner.classList.remove('scrolled');
|
|
isScrolled = false;
|
|
|
|
if (slideMenu) {
|
|
slideMenu.style.top = '110px';
|
|
}
|
|
|
|
// Reset transition flag after animation completes
|
|
setTimeout(() => {
|
|
isTransitioning = false;
|
|
}, 250);
|
|
}
|
|
}
|
|
|
|
function handleScroll() {
|
|
const currentScrollY = window.pageYOffset || document.documentElement.scrollTop;
|
|
|
|
// Detect scroll direction
|
|
if (currentScrollY > lastScrollY) {
|
|
scrollDirection = 'down';
|
|
} else if (currentScrollY < lastScrollY) {
|
|
scrollDirection = 'up';
|
|
}
|
|
|
|
// Only update when crossing threshold in the right direction
|
|
if (scrollDirection === 'down' && currentScrollY > scrollThreshold && !isScrolled) {
|
|
updateHeaderState(true);
|
|
} else if (scrollDirection === 'up' && currentScrollY <= scrollThreshold && isScrolled) {
|
|
updateHeaderState(false);
|
|
}
|
|
|
|
lastScrollY = currentScrollY;
|
|
}
|
|
|
|
// Use requestAnimationFrame for smooth scroll handling
|
|
let ticking = false;
|
|
function requestTick() {
|
|
if (!ticking) {
|
|
requestAnimationFrame(handleScroll);
|
|
ticking = true;
|
|
setTimeout(() => { ticking = false; }, 16); // ~60fps
|
|
}
|
|
}
|
|
|
|
// Optimized scroll event listener
|
|
window.addEventListener('scroll', requestTick, { passive: true, capture: false });
|
|
|
|
// Initial check
|
|
handleScroll();
|
|
});
|