Parallax Effect03 - 숨긴 메뉴

// window.addEventListener("scroll", () => {
//     let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;

//     // 스크롤 값이 0보다 크면 show 클래스를 추가
//     // if(scrollTop>0){
//     //     document.querySelector("#parallax__nav").classList.add("show")
//     // } else {
//     //     document.querySelector("#parallax__nav").classList.remove("show")
//     // }

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

document.querySelectorAll("#parallax__nav a").forEach(el => {
    el.addEventListener("click", e => {
        e.preventDefault();

        document.querySelector(el.getAttribute("href")).scrollIntoView({behavior:"smooth"})
    })
})

window.addEventListener("scroll", () => {
    let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;

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

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

let nowScroll = true;
let lastScroll = 0;

function scrollProgress(){
    nowScroll = true;

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

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")
    }
    lastScroll = scrollTop

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

window.addEventListener("scroll", scrollProgress)

• Document.querySelectorAll()
• EventTarget.addEventListener()
• Event.preventDefault()
• Element.getAttribute()
• element.scrollIntoView
• Window.pageYOffset
• Element.scrollTop
• Window.scrollY
• HTMLElement.offsetTop
• Math.round()
• setInterval()