이펙트 응용편 - 페럴럭스 세번째

페럴럭스 이펙트3

이번 페럴럭스 이펙트는 사이드 메뉴의 버튼을 클릭하면 해당하는 섹션으로 이동하며, 해당하는 섹션의 위치에 도달하면 버튼의 모양이 바뀜니다.

원본 소스 보기 원본 사이트 보기

---

js코드 설명

scrollProgress 함수를 만들어 setInterval 로 과부화를 방지후 스크롤을 위로 올리면 메뉴가 나오게 했습니다.

function scrollProgress() {
    nowScroll = true;
    setInterval(() => {
        if (nowScroll) {
            nowScroll = false;
            hasScroll();
        }
    }, 300);
}
function hasScroll() {
    let scrollTop = document.documentElement.scrollTop || window.pageYOffset || window.scrollY;
    if (scrollTop < lastScroll) {
        document.querySelector("#parallax__nav").classList.add("show");
    } else {
        document.querySelector("#parallax__nav").classList.remove("show");
    }
    lastScroll = scrollTop;
}
window.addEventListener("scroll", scrollProgress);

body 부분이 끝지점일때 맨위로 올라가는 버튼을 보여주게합니다.

if (scrollTop >= document.body.scrollHeight - window.innerHeight - 10) {
    document.querySelector("#parallax__top").classList.add("show");
} else {
    document.querySelector("#parallax__top").classList.remove("show");
}