Parallax Effect -

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 = 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((item,i) => {
        if(scrollTop >= item.offsetTop -2){
        document.querySelectorAll("#parallax__dot ul li").forEach(li => {
            li.classList.remove("active");
        });
        document.querySelector(`#parallax__dot ul li:nth-child(${i+1})`).classList.add("active");
    }
    });
});

 

패럴럭스 사이드 메뉴 효과