Parallax Effect01 - 메뉴 이동

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.pageYOffset;
    // let scrollTop = document.documentElement.scrollTop;
    // let scrollTop = window.scrollY;
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;

    // if(scrollTop > document.getElementById("section1").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     })
    //     document.querySelector("#parallax__nav li:nth-child(1)").classList.add("active");
    // }
    // if(scrollTop > document.getElementById("section2").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     })
    //     document.querySelector("#parallax__nav li:nth-child(2)").classList.add("active");
    // }
    // if(scrollTop > document.getElementById("section3").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     })
    //     document.querySelector("#parallax__nav li:nth-child(3)").classList.add("active");
    // }
    // if(scrollTop > document.getElementById("section4").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     })
    //     document.querySelector("#parallax__nav li:nth-child(4)").classList.add("active");
    // }
    // if(scrollTop > document.getElementById("section5").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     })
    //     document.querySelector("#parallax__nav li:nth-child(5)").classList.add("active");
    // }
    // if(scrollTop > document.getElementById("section6").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     })
    //     document.querySelector("#parallax__nav li:nth-child(6)").classList.add("active");
    // }
    // if(scrollTop > document.getElementById("section7").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     })
    //     document.querySelector("#parallax__nav li:nth-child(7)").classList.add("active");
    // }
    // if(scrollTop > document.getElementById("section8").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     })
    //     document.querySelector("#parallax__nav li:nth-child(8)").classList.add("active");
    // }
    // if(scrollTop > document.getElementById("section9").offsetTop){
    //     document.querySelectorAll("#parallax__nav li").forEach(li => {
    //         li.classList.remove("active");
    //     })
    //     document.querySelector("#parallax__nav li:nth-child(9)").classList.add("active");
    // }

    // for
    // for(let i=1; i<=9; i++){
    //     if(scrollTop >= document.getElementById("section"+i).offsetTop-2){
    //         document.querySelectorAll("#parallax__nav li").forEach(li => {
    //             li.classList.remove("active");
    //         })
    //         document.querySelector("#parallax__nav li:nth-child("+i+")").classList.add("active");
    //     }
    // }

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

• Document.querySelectorAll()
• EventTarget.addEventListener()
• Event.preventDefault()()
• Element.getAttribute()
• element.scrollIntoView
• Window.pageYOffset
• Element.scrollTop
• Window.scrollY
• Element.remove()
• HTMLElement.offsetTop