티스토리 뷰

Script effect/Parallax effect

Javascript Parallax Effect03 - 숨김 메뉴

개발자가되고싶은자 2022. 3. 8. 14:14

  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.pageYOffset || document.documentElement.scrollTop || window.scrollY;
            let parallax__nav = document.querySelector("#parallax__nav")

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

            document.querySelectorAll(".content__item").forEach((el, index) => {
                if (scrollTop >= el.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")
                }
            })
        })

        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) {
                parallax__nav.classList.add("show")
            } else {
                parallax__nav.classList.remove("show")
            }
            lastScroll = scrollTop;
            console.log("lastScroll :" + lastScroll)
            console.log("scrollTop :" + scrollTop)
        }
        window.addEventListener("scroll", scrollProgress)
 }           

https://jowuseop1110.github.io/webs_class/javascript/effect/parallaxEffect03.html

댓글
© 2018 webstoryboy