Parallax Effect 03 - 숨김 메뉴

 

let nowScroll = true;
    let lastScroll = 0;

    function scrollProgress(){
        nowScroll = true;

        setInterval(()=>{			// 스크롤을 내리는지 올리는지 판단하기 위해 setInterval을 사용한다.
            if(nowScroll){
                nowScroll = false;
                hasScroll();
            }
        }, 1000)
    }
    
    function hasScroll(){
        let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
            
        if (scrollTop > lastScroll){
            document.querySelector("#parallax__nav").classList.add("show");
        } else {
            document.querySelector("#parallax__nav").classList.remove("show");
        }

        document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);

        lastScroll = scrollTop;
        console.log("lastScroll : " + lastScroll);
        console.log("scrollTop : " + scrollTop);

        let nav = document.querySelectorAll("#parallax__nav li");

        nav.forEach((el,index) => {
            if(scrollTop >= document.getElementById("section"+(index+1)).offsetTop -2){
                nav.forEach(li=>{
                    li.classList.remove("active");
                })
                nav[index].classList.add("active");
            }
        })

    }
    window.addEventListener("scroll", scrollProgress)

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

 

스크롤을 내리면 메뉴바가 생기고 올리면 메뉴바가 사라지는 예제입니다.

현재 스크롤값과 1초전 스크롤값을 비교하여 올라가는지 내려가는지 판단하고

메뉴탭을 사라지고 나타나게 하는 효과를 주었습니다.

 

핵심은 스크롤값 비교를 위해 setInterval 을 사용해야 한다는 점입니다.

 

 

전체 사이트 보기