parallaxEffect03 - 숨김 메뉴

개요

스크롤을 내릴 땐 메뉴가 안보이지만, 

스크롤을 올리면 메뉴가 나타나는 효과를 주었다.

HTML 구성

<nav id="parallax__nav">
    <ul>
        <li class="active"><a href="#section1"><span>메뉴1</span></a></li>
        <li><a href="#section2"><span>메뉴2</span></a></li>
        <li><a href="#section3"><span>메뉴3</span></a></li>
        <li><a href="#section4"><span>메뉴4</span></a></li>
        <li><a href="#section5"><span>메뉴5</span></a></li>
        <li><a href="#section6"><span>메뉴6</span></a></li>
        <li><a href="#section7"><span>메뉴7</span></a></li>
        <li><a href="#section8"><span>메뉴8</span></a></li>
        <li><a href="#section9"><span>메뉴9</span></a></li>
    </ul>
</nav>

CSS 생략

JS 구성

1. 스크롤하면 scrollProgress 함수가 실행되도록 하자.

그 외에도 hasScroll 함수도 있다

function scrollProgress(){}

function hasScroll(){}

window.addEventListener("scroll", scrollProgress);

2. 변수를 선언하자.

nowScroll은 현재의 스크롤 값

lastScroll은 이전의 스크롤 값이다

let nowScroll = true; 
let lastScroll = 0; 

function scrollProgress(){}

function hasScroll(){}

window.addEventListener("scroll", scrollProgress);

3. scrollPregress 함수를 정의하자.

setInterval을 사용하여 0.3.초마다 hasScroll을 실행하게 하자

function scrollProgress(){
    nowScroll = true;

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

4. hasScroll 함수를 정의하자

scrollTop은 스크린의 Y값 즉, 현재의 스크롤 값이고

lastScroll은 0.3초 전의 스크린 Y값이다

 

if문을 사용하여

scrollTop < lastScroll 즉, 스크롤을 위로 하였다면 class=show를 추가하고

scrollTop > lastScroll 즉, 스크롤을 아래로 하였다면 class=show를 제거한다

 

그리고 나선 lastScroll을 현재의 scroll값으로 업데이트 해준다

function hasScroll(){
    let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
    (scrollTop < lastScroll)? document.querySelector("#parallax__nav").classList.add("show") : document.querySelector("#parallax__nav").classList.remove("show");

    lastScroll = scrollTop;
}

결론

논리적인 사고를 하자...!

 

 

링크 https://sungilryuu.github.io/webs_class/javascript/effect/parallaxEffect03.html