Parallax Effect - 숨김 메뉴

 

설명

현재 스크롤값과 이전 스크롤값에 따라서 스크롤을 내릴땐 메뉴바가 숨어있지만 스크롤을 올리면 메뉴바가 나타납니다.

현재 스크롤값과 이전 스크롤값을 setInterval()메서드를 이용해 실시간으로 값을 구해준 뒤 현재스크롤 값이 이전 스크롤값 보다 높으면 스크롤이 내려가고 있는 것 입니다. 이때는 메뉴바를 숨겨놓습니다.
그리고 현재 스크롤 값이 이전 스크롤값 보다 작을경우 스크롤이 올라가고 있는 것 입니다. 이때는 메뉴바가 나타납니다.

window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
    
    document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);

    document.querySelectorAll(".content__item").forEach((el, index) => {
        if(scrollTop >= el.offsetTop -2){
            document.querySelectorAll("#parallax__nav ul li").forEach(li => {
            li.classList.remove("active")
            })
            document.querySelector("#parallax__nav ul li:nth-child("+(index+1)+")").classList.add("active")
        }
    })
})        

let nowScroll = true;       //내가 스크롤링을 하고있다는걸 감지
let lastScroll = 0;

function scrollProgress(){
    nowScroll = true;

    setInterval(() => {                 //시간차를 이용해서 이전위치와 현재 위치를 비교
        if(nowScroll){
            nowScroll = false;
            hasScroll();
        }
    }, 300);

    console.log(nowScroll)
}

function hasScroll(){
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
    if(scrollTop < lastScroll){
        document.querySelector("#parallax__nav").classList.add("show")
    } else {
        document.querySelector("#parallax__nav").classList.remove("show")
    }

    lastScroll = scrollTop;

    console.log("lastScroll : " + lastScroll)
}

window.addEventListener("scroll", scrollProgress)

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