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");
    })
})
window.addEventListener("scroll", () => {

    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;

    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");
    }
    })
    
    //info
    document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);

    document.querySelector(".offset1").innerText = document.getElementById("section1").offsetTop;
    document.querySelector(".offset2").innerText = document.getElementById("section2").offsetTop;
    document.querySelector(".offset3").innerText = document.getElementById("section3").offsetTop;
    document.querySelector(".offset4").innerText = document.getElementById("section4").offsetTop;
    document.querySelector(".offset5").innerText = document.getElementById("section5").offsetTop;
    document.querySelector(".offset6").innerText = document.getElementById("section6").offsetTop;
    document.querySelector(".offset7").innerText = document.getElementById("section7").offsetTop;
    document.querySelector(".offset8").innerText = document.getElementById("section8").offsetTop;
    document.querySelector(".offset9").innerText = document.getElementById("section9").offsetTop;
})

 

패럴럭스 메뉴 이동 효과