Parallax Effect03 - 숨김 메뉴

document.querySelectorAll("#parallax__nav li a").forEach(li => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior:"smooth"
        })
    })
})

window.addEventListener("scroll", () => {
    let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
    
    // 스크롤 값이 0보다 크면 show 클래스를 추가, 아니면 show 클래스 삭제
    // if(scrollTop > 0){
    //     document.querySelector("#parallax__nav").classList.add("show")
    // } else {
    //     document.querySelector("#parallax__nav").classList.remove("show")
    // }

    document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);
})

let nowScroll = true;
let lastScroll = 0;

function scrollProgress(){
    nowScroll = true;

    setInterval(()=> {
        if(nowScroll){
            nowScroll = false;
            hasScroll();
        }
    }, 300);
    
}   

function hasScroll(){
    let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
    
    if(scrollTop < lastScroll){
        document.querySelector("#parallax__nav").classList.add("show")
    } else {
        document.querySelector("#parallax__nav").classList.remove("show")
    }

    lastScroll = scrollTop;

    console.log("lastScroll :" + lastScroll);
    console.log("scrollTop :" + scrollTop);
}    

window.addEventListener("scroll",scrollProgress)

 

패럴랙스 효과