Parallax Effect - 사이드 메뉴 이동

 

설명

현재 스크롤값에 따라서 섹션을 이동할때 사이드 메뉴에 섹션에 맞는 메뉴에 표시가 됩니다.

먼저 각 섹션별 offsetTop값을 구하고 현재 스크롤값이 각 섹션별 offsetTop값보다 같거나 커질 경우 사이드 메뉴에 표시가 됩니다.

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

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

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

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