Parallax Effect02 - 사이드 메뉴 이동

document.querySelectorAll("#parallax__dot a").forEach(el => {
    el.addEventListener("click", e => {
        e.preventDefault();

        //window.scroll(0, 1000);
        //window.scroll({left: 0, top: 1000});
        //window.scroll({left: 0, top: 1000,  behavior: "smooth"});

        // window.scrollTo(0, 1000);
        // window.scrollTo({left: 0, top: 1000});
        // window.scrollTo({left: 0, top: 1000,  behavior: "smooth"});

        // window.scrollBy(0, 1000);
        // window.scrollBy({left: 0, top: 1000});
        // window.scrollBy({left: 0, top: 1000,  behavior: "smooth"});

        document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"});
    })
})

window.addEventListener("scroll", () => {
    let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;

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

//forEach
document.querySelectorAll(".content__item").forEach((element, index)=> {
        if(scrollTop >= element.offsetTop -2){
            document.querySelectorAll("#parallax__dot li").forEach( li => {
                li.classList.remove("active");
            });
            document.querySelector("#parallax__dot li:nth-child("+(index+1)+")").classList.add("active");
        }
    })
});

 

패럴랙스 효과