패럴랙스 이펙트03. : 숨김메뉴

 //el의 속성값 (a태그) href - 아이디 섹션값을 지정해서 클릭하면 부드럽게 이동하기 
        document.querySelectorAll("#parallax__nav li a").forEach(li =>{
            li.addEventListener("click", (e)=>{
                e.preventDefault();
                document.querySelector(li.getAttribute("href")).scrollIntoView({
                    behavior: "smooth"
                })
            })
        })
        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");
            // }
            //스크롤 Y값 출력
            document.querySelector(".srcollTop").innerText = Math.round(scrollTop);

            //스크롤이 내려감에 따라서 액티브가 바뀌도록 하는 스크립트
            // let nav = document.querySelectorAll("#parallax__nav ul li");         
            // for(let i =1; i<= nav.length; i++){
            //     if(scrollTop >= document.getElementById("section0"+ i).offsetTop -2){
            //     document.querySelectorAll("#parallax__nav ul li").forEach(li => {                    
            //         li.classList.remove("active");
            //     }) 
            //     document.querySelector("#parallax__nav ul li:nth-child("+i+")").classList.add("active");                                           
            //     }
            // }
            //forEach
            document.querySelectorAll(".content__item").forEach((e,i)=>{
                if (scrollTop >= e.offsetTop -2){
                    document.querySelectorAll("#parallax__nav ul li").forEach( li => {
                        li.classList.remove("active")
                    })
                    document.querySelector("#parallax__nav li:nth-child("+(i+1)+")").classList.add("active")
                }
            })
        });

        //스크롤 값에 따라 메뉴 클래스 show의 추가/삭제.
        let nowScroll = true;
        let lastScroll = 0;

        function scrollProgress(){
            nowScroll = true;
            //setInterval 함수를 사용해서 빠르게 반복. 
            setInterval(() => {
                if(nowScroll){
                    nowScroll = false;
                    //0.3초안에 false로 바뀌는 순간마다 hasScroll 함수를 실행.
                    hasScroll();
                }
            }, 300);

            console.log(nowScroll);
        }
        function hasScroll(){
            let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
            //scrollTop(현재 스크롤 값)이 lastScroll보다 작으면 = 스크롤이 올라갈 때. (위로 갈 때.)
            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); //스크롤 하면 scrollProgress 함수가 실행.


 

 

이번예제는 스크롤이 움직이는 값에 따라 메뉴가 숨겨졌다가 나왔다가 하는 이펙트 입니다. 

 

현재 스크롤 값이 이전 스크롤 보다 작으면 ( 스크롤이 올라갈 때) show 클래스가 추가됩니다. 

반대로, 값이 크면( 스크롤이 내려갈 때) show 클래스가 삭제됩니다. 

lastScroll = scrollTop . 이렇게 두 값이 같아야 바로 이전의 스크롤 값이 현재 스크롤 값으로 구해집니다. 

그리고 setInterval 함수를 이용해서 nowScroll이 true로 나오는 함수를 실행하는데 반복되는 순간마다 false로 나오게 해준뒤 그 순간 hasScroll 함수가 작동되게 해줍니다.