Script Sample/ParallaxEffect
Parallax Effect 03 - 스크롤링 효과 : 숨김 메뉴
근혁
2022. 3. 8. 14:01
{
let nowScroll = true;
let lastScroll = 0;
function scrollProgress(){
nowScroll = true;
setInterval(()=>{
if(nowScroll){
nowScroll = false;
hasScroll()
}
},300);
}
function hasScroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY
if(scrollTop < lastScroll){ //lastScroll이 scrollTop보다 클때 show를 추가하고 아니면 show를 삭제
document.querySelector("#parallax__nav").classList.add("show")
}else {
document.querySelector("#parallax__nav").classList.remove("show")
}
lastScroll = scrollTop;
}
window.addEventListener("scroll", scrollProgress)
document.querySelectorAll("#parallax__nav a").forEach(el => {
el.addEventListener("click", e =>{
e.preventDefault();
document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"})
})
})
}