패럴랙스 - 사이드 메뉴

패럴랙스 사이드메뉴

페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다.

info

사이드에 있는 스크롤 바에 버튼을 클릭했을 때 이동하도록 a의 인자값을 불러왔습니다.
하지만 저희는 부드럽게 이동시키기 위해서 a의 역할을 해지시키도록 preventDefault 메서드를 사용하여 억제하였고
href 속성에 부드럽게 이동하는 behavior 속성을 사용하여 보내주었습니다.

메뉴바 이동을 부드럽게 해주기

//스크롤이동
document.querySelectorAll("#parallax__dot a").forEach(el => {
    el.addEventListener("click", e => {
        e.preventDefault();
        console.log(e)
        document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"});
    })
});

위치에 따라 메뉴바 옮기기

여러 브라우저 환경에서 scrollTop의 값을 구하기 위해 이 || 연산자를 사용하였습니다.
innerText를 사용하여 html에 출력을 하도록 하고 Math 메서드를 사용하여 소수점을 제거하였습니다.
offset위치를 구했으니 반복문(forEach문)을 사용하여 계속 scrollTop의 값과 offsetTop을 사용하여 요소의 위치 값과 비교합니다.
비교했을 때 위치를 확인하고 사이드 메뉴에 표시합니다.
사이드 메뉴는 배열이기 때문에 0부터 시작해서 i값에 1을 더해서 시작해 주도록 합니다.

offset위치

window.addEventListener("scroll", () =>{
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; //한번에 처리
    document.querySelector("#parallax__info span").innerText = Math.round(scrollTop);

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

결과

사이트 결과

원본 소스 보기