Parallax Effect - 숨김 메뉴

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

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;

    document.querySelectorAll(".content__item").forEach((item,i) => {
        if(scrollTop >= item.offsetTop -2){
        document.querySelectorAll("#parallax__nav ul li").forEach(li => {
            li.classList.remove("active");
        });
        document.querySelector(`#parallax__nav ul li:nth-child(${i+1})`).classList.add("active");
    }
    })

    if (scrollTop < lastScroll) {
        document.getElementById("parallax__nav").classList.add("show");
    } else {
        document.getElementById("parallax__nav").classList.remove("show");
    }

    lastScroll = scrollTop;

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

window.addEventListener("scroll", scrollProgress)

 

페럴럭스 숨김 메뉴 효과 사이트