Parallax Effect 02 - 사이드 메뉴

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.screenY || window.pageYOffset || document.documentElement.scrollTop;

   document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);

    let dot = document.querySelectorAll("#parallax__dot li");

    dot.forEach((el,index) => {
        if(scrollTop >= document.getElementById("section"+(index+1)).offsetTop -2){
            dot.forEach(li=>{
                li.classList.remove("active");
            })
            dot[index].classList.add("active");
        }
    })
})

 

앞서 진행했던 Parallax Effect 01 예제와 같은 방식입니다.

 

이미지에 .offsetTop 을 이용하여 Y축 좌표값을 추출하고 

스크롤값과 비교하는 방식을 사용했습니다.

 

자세한 설명은 Parallax Effect 01 을 참고하시면 됩니다.

 

전체 사이트 보기