Parallax Effect01 - 메뉴 이동

//el의 속성값 (a태그) href - 아이디 섹션값을 지정해서 클릭하면 부드럽게 이동
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", () => {
   //3가지 방법을 합쳐서 씀.
   // let scrollTop = window.pageYOffset;
   // let scrollTop = document.documentElement.scrollTop;
   // let scrollTop = window.scrollY;
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY; 

    //forEach
    document.querySelectorAll(".content__item").forEach((element, index)=> {
        if(scrollTop >= element.offsetTop -2){
            document.querySelectorAll("#parallax__nav li").forEach( li => {
                li.classList.remove("active");
            });
            document.querySelector("#parallax__nav li:nth-child("+(index+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
})

https://jiseonpack.github.io/webs_class/javascript/effect/parallaxEffect01.html

패럴랙스 효과