01. 패럴랙스 스크롤링 효과 : 메뉴 이동

        // 네비 누르면 스무스하게 스크롤 이동
        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 ul li").forEach( li => {
            //         li.classList.remove("active");
            //     }) 
            //     document.querySelector("#parallax__nav ul li:nth-child(1)").classList.add("active")
            // }
            // if(scrollTop > document.getElementById("section2").offsetTop){
            //     document.querySelectorAll("#parallax__nav ul li").forEach( li => {
            //         li.classList.remove("active");
            //     }) 
            //     document.querySelector("#parallax__nav ul li:nth-child(2)").classList.add("active")
            // }
            // if(scrollTop > document.getElementById("section3").offsetTop){
            //     document.querySelectorAll("#parallax__nav ul li").forEach( li => {
            //         li.classList.remove("active");
            //     }) 
            //     document.querySelector("#parallax__nav ul li:nth-child(3)").classList.add("active")
            // }
            // if(scrollTop > document.getElementById("section4").offsetTop){
            //     document.querySelectorAll("#parallax__nav ul li").forEach( li => {
            //         li.classList.remove("active");
            //     }) 
            //     document.querySelector("#parallax__nav ul li:nth-child(4)").classList.add("active")
            // }
            // if(scrollTop > document.getElementById("section5").offsetTop){
            //     document.querySelectorAll("#parallax__nav ul li").forEach( li => {
            //         li.classList.remove("active");
            //     }) 
            //     document.querySelector("#parallax__nav ul li:nth-child(5)").classList.add("active")
            // }
            // if(scrollTop > document.getElementById("section6").offsetTop){
            //     document.querySelectorAll("#parallax__nav ul li").forEach( li => {
            //         li.classList.remove("active");
            //     }) 
            //     document.querySelector("#parallax__nav ul li:nth-child(6)").classList.add("active")
            // }
            // if(scrollTop > document.getElementById("section7").offsetTop){
            //     document.querySelectorAll("#parallax__nav ul li").forEach( li => {
            //         li.classList.remove("active");
            //     }) 
            //     document.querySelector("#parallax__nav ul li:nth-child(7)").classList.add("active")
            // }
            // if(scrollTop > document.getElementById("section8").offsetTop){
            //     document.querySelectorAll("#parallax__nav ul li").forEach( li => {
            //         li.classList.remove("active");
            //     }) 
            //     document.querySelector("#parallax__nav ul li:nth-child(8)").classList.add("active")
            // }
            // if(scrollTop > document.getElementById("section9").offsetTop){
            //     document.querySelectorAll("#parallax__nav ul li").forEach( li => {
            //         li.classList.remove("active");
            //     }) 
            //     document.querySelector("#parallax__nav ul li:nth-child(9)").classList.add("active")
            // }

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

            //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 ul 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
        })

패럴랙스01 사이트