자바스크립트 패럴랙스 효과 03_숨김메뉴, 탑버튼

자바스크립트 패럴랙스 효과 03_숨김메뉴, 탑버튼

 

 

 

 

 

💜 parallax Effect03

코드 보기 / 완성 화면

 

 

이번 패럴랙스 효과는

스크롤했을 때 사라지는 메뉴바와 

아래로 다 스크롤 했을 때 나타나는 탑버튼입니다.

 

 

HTML

<div class="parallax__top">
    <a href="#header">Top</a>
</div>
<!-- //parallax__top -->

클릭하면 화면 상단의 header부분으로 넘어갈 수 있게 Top버튼을 만들어줍니다.

 

 

script

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


    if (scrollTop > document.body.scrollHeight - 1000) {
        document.querySelector(".parallax__top").classList.add("show");
    } else {
        document.querySelector(".parallax__top").classList.remove("show");
    }

});


// 탑버튼 애니메이션
document.querySelector(".parallax__top a").addEventListener("click", function (e) {
    e.preventDefault();
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });
});

// 03. 메뉴
let nowScroll = true;
let lastScroll = 0;

function scrollProgress() {
    nowScroll = true;
    setInterval(() => {
        if (nowScroll) {
            nowScroll = false;
            hasScrool();
        }
    }, 300);
}

function hasScrool() {
    let scrollTop = window.pageXOffset || window.scrollY;

    if (scrollTop < lastScroll) {
        document.querySelector(".parallax__nav").classList.add("show");
    } else {
        document.querySelector(".parallax__nav").classList.remove("show");
    }
    lastScroll = scrollTop;
    document.querySelector(".scroll span").innerText = Math.round(scrollTop);
}

window.addEventListener("scroll", scrollProgress);

스크롤의 위치에 따라 Top버튼이 나타나거나 사라지도록 하는 기능을 수행합

스크롤 위치를 알기 위해 window.pageXOffset || window.scroolY 코드를 사용

이 값이 문서 끝에서 일정 거리 이하인 경우, parallax__top 요소에 show 클래스가 추가

 그렇지 않은 경우, show 클래스가 제거

 

Top 버튼을 클릭하면 페이지 맨 위로 스크롤되도록 하는 기능도 포함

 

/

 

스크롤 위치에 따라 네비게이션 메뉴가 나타나거나 사라지도록 하는 기능

nowScroll 변수와 hasScroll 함수가 사용

nowScroll 변수는 스크롤 이벤트가 발생할 때마다 true로 설정되어 setInterval() 함수가 실행되고,

setInterval()함수는 일정한 간격으로 hasScroll()함수를 호출

hasScroll()함수는 스크롤 위치에 따라 .parallax__nav 요소에  show 클래스를 추가하거나 제거

또한 현재 스크롤 위치를 표시하는 scroll요소의 내용을 업데이트함

 

hasScroll은 scrollProgress함수에 의해 호출되며, 사용자가 페이지를 위아래로 스크롤했는지 여부를 판단하는 함수이다. 

먼저 페이지의 현재 스크롤 위치를 가져와 이전 스크롤 위치와 비교해 스크롤 방향을 결정한다.

사용자가 위로 스크롤한 경우 show 클래스를 parallax__nav 요소에 추가해 내비게이션 메뉴를 표시하고, 사용자가 아래로 스크롤한 경우 show 클래스를 제거하여 내비게이션 메뉴는 숨긴다.

lastScroll변수를 현재 스크롤 위치로 설정해 다음 함수 실행에서 사용하고, scroll span 요소를 업데이트하여 현재 스크롤 위치를 표시한다.