2 lines
3.0 KiB
JavaScript
2 lines
3.0 KiB
JavaScript
document.addEventListener("DOMContentLoaded",function(){const topBanner=document.querySelector('.top-banner');const slideMenu=document.querySelector('.slide-menu');if(!topBanner)return;const scrollThreshold=50;const rafDelay=8;let isScrolled=false;let lastScrollY=0;let scrollDirection='down';let rafId=null;let lastUpdateTime=0;let scrollVelocity=0;let lastScrollTime=0;function calculateVelocity(currentScrollY,currentTime){if(lastScrollTime===0){lastScrollTime=currentTime;return 0;}const timeDelta=currentTime-lastScrollTime;const scrollDelta=Math.abs(currentScrollY-lastScrollY);const velocity=scrollDelta/timeDelta;lastScrollTime=currentTime;return velocity;}function updateHeaderState(scrolled,velocity=0){if(scrolled===isScrolled)return;if(velocity>5){topBanner.classList.add('fast-scroll');}else{topBanner.classList.remove('fast-scroll');}requestAnimationFrame(()=>{if(scrolled){topBanner.classList.add('scrolled');if(slideMenu){slideMenu.style.transition='top 0.3s cubic-bezier(0.4, 0, 0.2, 1)';slideMenu.style.top='80px';}}else{topBanner.classList.remove('scrolled');if(slideMenu){slideMenu.style.transition='top 0.3s cubic-bezier(0.4, 0, 0.2, 1)';slideMenu.style.top='110px';}}});isScrolled=scrolled;}function handleScroll(currentTime){if(currentTime-lastUpdateTime<rafDelay){rafId=requestAnimationFrame(handleScroll);return;}const currentScrollY=window.pageYOffset||document.documentElement.scrollTop;const velocity=calculateVelocity(currentScrollY,currentTime);const scrollDelta=currentScrollY-lastScrollY;if(Math.abs(scrollDelta)>1){scrollDirection=scrollDelta>0?'down':'up';}let shouldScroll;if(scrollDirection==='down'){shouldScroll=currentScrollY>scrollThreshold+10;}else{shouldScroll=currentScrollY>scrollThreshold-10;}updateHeaderState(shouldScroll,velocity);lastScrollY=currentScrollY;lastUpdateTime=currentTime;rafId=null;}function onScroll(){if(!rafId){rafId=requestAnimationFrame(handleScroll);}}window.addEventListener('scroll',onScroll,{passive:true,capture:false});let resizeTimeout;function onResize(){clearTimeout(resizeTimeout);resizeTimeout=setTimeout(()=>{lastScrollY=window.pageYOffset||document.documentElement.scrollTop;updateHeaderState(lastScrollY>scrollThreshold);},100);}window.addEventListener('resize',onResize,{passive:true});function onVisibilityChange(){if(document.hidden){if(rafId){cancelAnimationFrame(rafId);rafId=null;}}else{lastScrollY=window.pageYOffset||document.documentElement.scrollTop;updateHeaderState(lastScrollY>scrollThreshold);}}document.addEventListener('visibilitychange',onVisibilityChange);requestAnimationFrame(()=>{updateHeaderState(window.pageYOffset>scrollThreshold);});document.querySelectorAll('a[href^="#"]').forEach(link=>{link.addEventListener('click',function(e){const targetId=this.getAttribute('href');if(targetId==='#')return;const targetElement=document.querySelector(targetId);if(targetElement){e.preventDefault();const headerHeight=topBanner.offsetHeight;const targetPosition=targetElement.offsetTop-headerHeight-20;window.scrollTo({top:targetPosition,behavior:'smooth'});}});});});
|