티스토리 뷰

{
        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 || document.documentElement.scrollTop ||  window.scrollY;
  
            // forEach 
            document.querySelectorAll(".content__item").forEach((element, index)=>{
                if(scrollTop >= element.offsetTop -2){
                    document.querySelectorAll("#parallax__nav ul 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
}
댓글
© 2018 webstoryboy