Parallax Effect 스크롤링 효과 - 숨김메뉴

	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);

        })

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

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

            // for(let i = 1; i<=9; i++) {
            //     if(scrollTop >= document.getElementById("section" + i).offsetTop -2) {
            //         document.querySelectorAll("#parallax__nav li").forEach(li => {
            //             li.classList.remove("active");
            //         })
            //         document.querySelector("#parallax__nav li:nth-child("+ i +")").classList.add("active");
            //     }
            // }

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


        // 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);
        // })

        let nowScroll = true;
        let lastScroll = 0;
        function scrollProgress(){
            nowScroll = true;
            setInterval(() => {
                if(nowScroll){
                    nowScroll = false;
                    hasScroll();
                }
            }, 300);
        }
        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;
        }
        window.addEventListener("scroll", scrollProgress)

 

자바스크립트로 패럴럭스 스크롤링(Parallax Scroll Effect)을 주는 사이트 입니다.

스크롤을 내릴 때는 메뉴바가 없지만 스크롤을 올릴때 메뉴바가 생기는 사이트입니다.

현재 스크롤 값과 1초전의 스크롤 값을 비교하여 스크롤이 내려가고 올라가는 것을 판단하여 메뉴바가 사라지거나

생기는 스크립트를 만들었습니다. 

 

참조사이트

패럴랙스 효과