초짜코딩의 잡동사니

parallaxEffect03 - 숨긴메뉴 본문

Script Sample/parallax effect

parallaxEffect03 - 숨긴메뉴

초짜코딩 2022. 3. 11. 16:09

let nowScroll = true;
let lastScroll = 0;

function scrollProgress(){
    nowScroll = true;

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

function hasScroll(){
    let scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop

    if(scrollTop < lastScroll){
        document.querySelector("#parallax__nav").classList.add("show")
    }else{
        document.querySelector("#parallax__nav").classList.remove("show")
    }
    lastScroll = scrollTop;

    document.querySelectorAll(".content__item").forEach((element, index) => {
        if(scrollTop >= element.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")
        }
    })
    document.querySelector(".scrollTop span").innerText =Math.round(scrollTop);
}
window.addEventListener("scroll", scrollProgress)