자바스크립트 패럴랙스 효과 : 메뉴 숨김, TOP버튼

자바스크립트 : 패럴랙스 효과 : 메뉴 숨김

자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 패럴렉스 효과 1번과 같은 메뉴 디자인이지만, 스크롤을 아래로 내리면 메뉴가 사라지고, 위로 올리면 메뉴가 나타나도록 작업해 주었습니다. 또, 스크롤이 최하단 부근에 위치하면 Top 버튼이 나타나고, Top 버튼을 클릭하면 최상단으로 올라갈 수 있는 기능을 추가해 주었습니다.

---

1. 스크롤 이벤트 만들어 주기

window.addEventListener("scroll", () => {
    /* 1) 스크롤의 높이값 구하기 */
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
    /* 2) info 박스에 스크롤의 높이값 입력 */ 
    document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop);

    /* 3) 현재 스크롤의 높이값(scrollTop)과 각 섹션의 높이값(el.offsetTop)을 비교하여,
             해당하는 메뉴에 active 클래스를 활성화하고, 나머지 메뉴의 active 클래스는 제거 */
    document.querySelectorAll(".content__item").forEach((el, i) => {
        if (scrollTop > el.offsetTop - 500) {
            document.querySelectorAll("#parallax__nav li").forEach((li) => {
                li.classList.remove("active");
            });
            document.querySelector("#parallax__nav li:nth-child(" + (i + 1) + ")").classList.add("active");
        }
    });

    /* 4) 브라우저의 전체 높이를 구하고, 브라우저의 최하단 부근에 스크롤이 위치하면 TOP 버튼 보여주기 */
    let body = document.body.offsetHeight;
    if (body - 1000 <= scrollTop) {
        document.querySelector("#parallax__top").classList.add("show");
    } else {
        document.querySelector("#parallax__top").classList.remove("show");
    }
});

스크롤의 높이값을 구하는 세 가지 방법은 모두 브라우저 기준으로 값을 구하는 같은 속성이지만, 호환되는 브라우저가 다르기 때문에 세 가지 모두 작성해 주는 것이 좋습니다. 위와 같이 스크롤 이벤트를 3가지 만들어 주었습니다. 높이값에서 빼기를 해주는 이유는 오차를 줄이기 위해서입니다.

2. 클릭 이벤트 만들어 주기

/* MENU */
document.querySelectorAll("#parallax__nav a").forEach((el) => {
    el.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(el.getAttribute("href")).scrollIntoView({ behavior: "smooth" });
    });
});

/* TOP 버튼 */
let TOP = document.querySelector("#parallax__top");
TOP.addEventListener("click", (e) => {
    e.preventDefault();
    window.scroll({
        top: 0,
        left: 0,
        behavior: "smooth"
    });
});

preventDefault()는 기존의 클릭 이벤트를 초기화하는 메서드입니다.
먼저, 각각의 MENU 버튼을 눌렀을 때, a 태그의 기본 속성으로 인해 각 섹션으로 즉시 이동하는 이벤트를 초기화해 주었습니다. 그 다음, smooth 속성을 적용하여 부드럽게 이동하도록 작업해 주었습니다.
TOP 버튼의 경우도 마찬가지입니다. 클릭 이벤트를 초기화해준 후, 버튼을 클릭했을 때 top, left의 값이 0에 위치하도록, 즉 최상단으로, smooth 속성에 따라 부드럽게 이동할 수 있도록 작업해 주었습니다.

3. 메뉴 숨김 효과 추가하기

let nowScroll = true;
let lastScroll = 0;

function scrollProgress() {
    nowScroll = true;

    setInterval(() => {
        if (nowScroll) {
            nowScroll = false;
            hasScroll();
        }
    }, 300);
}

function hasScroll() {
    /* 지역변수 새로 만들어주기 */
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
    /* 스크롤을 올릴 때 메뉴를 보여주고, 내릴 때 숨기기 */
    if (scrollTop < lastScroll) {
        document.querySelector("#parallax__nav").classList.add("show");
    } else {
        document.querySelector("#parallax__nav").classList.remove("show");
    }
    lastScroll = scrollTop;
}

메뉴 숨김 효과는 트리거변수를 사용하였습니다. 트리거변수는 값이 true일 때 실행하고, false일 때 실행을 중지하는 변수를 말합니다. setInterval() 메서드를 사용하는 이유는, 시간차를 줌으로써 버벅거림을 피하기 위해서입니다.
lastScroll은 과거의 스크롤 값이라고 할 수 있겠습니다. 즉, lastScroll(과거)이 scrollTop(현재)의 값보다 크면, 스크롤을 올리고 있는 것이고, 그 반대라면 스크롤을 내리고 있다고 할 수 있습니다.

4. 함수 실행시키기

window.addEventListener("scroll", scrollProgress);

---

결과

내일 여행을 가기 때문에 신이 나서 아주 열심히 글을 작성했습니다. 티가 나나요? 깔깔.

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