Parallax Effect04 - javascript

패랠랙스 스크로링 효과 - 숨김 메뉴2

scrollTop : 0px

Section1

Be true to thyself.

Section2

Attitude is everything.

Section3

It hurt because it mattered.

Section4

Sometimes the right path is not the easiest one.

Section5

Yesterday you said tomorrow. Just do it.

Section6

Happiness depends upon ourselves.

Section7

Faith makes all things possible.

Section8

Time you enjoy wasting is not wasted time.

Section9

Don’t dream it, be it.

<main>

    <div class="paraScroll">scrollTop : <span>0</span>px</div>
    <!-- //paraScroll -->

    <nav class="paraNav">
        <ul>
            <li class="active"><a href="#section1">메뉴1</a></li>
            <li><a href="#section2">메뉴2</a></li>
            <li><a href="#section3">메뉴3</a></li>
            <li><a href="#section4">메뉴4</a></li>
            <li><a href="#section5">메뉴5</a></li>
            <li><a href="#section6">메뉴6</a></li>
            <li><a href="#section7">메뉴7</a></li>
            <li><a href="#section8">메뉴8</a></li>
            <li><a href="#section9">메뉴9</a></li>
        </ul>
    </nav>
    <!-- //paraNav -->

    <div class="paraCont">
        <section id="section1" class="content-item">
            <span class="num">01</span>
            <h2 class="title">Section1</h2>
            <figure class="img-Wrap">
                <div class="img"></div>
            </figure>
            <p class="desc">Be true to thyself.</p>
        </section>
        <!-- //section1 -->

        <section id="section2" class="content-item">
            <span class="num">02</span>
            <h2 class="title">Section2</h2>
            <figure class="img-Wrap">
                <div class="img"></div>
            </figure>
            <p class="desc">Attitude is everything.</p>
        </section>
        <!-- //section2 -->

        <section id="section3" class="content-item">
            <span class="num">03</span>
            <h2 class="title">Section3</h2>
            <figure class="img-Wrap">
                <div class="img"></div>
            </figure>
            <p class="desc">It hurt because it mattered.</p>
        </section>
        <!-- //section3 -->

        <section id="section4" class="content-item">
            <span class="num">04</span>
            <h2 class="title">Section4</h2>
            <figure class="img-Wrap">
                <div class="img"></div>
            </figure>
            <p class="desc">Sometimes the right path is not the easiest one.</p>
        </section>
        <!-- //section4 -->

        <section id="section5" class="content-item">
            <span class="num">05</span>
            <h2 class="title">Section5</h2>
            <figure class="img-Wrap">
                <div class="img"></div>
            </figure>
            <p class="desc">Yesterday you said tomorrow. Just do it.</p>
        </section>
        <!-- //section5 -->

        <section id="section6" class="content-item">
            <span class="num">06</span>
            <h2 class="title">Section6</h2>
            <figure class="img-Wrap">
                <div class="img"></div>
            </figure>
            <p class="desc">Happiness depends upon ourselves.</p>
        </section>
        <!-- //section6 -->

        <section id="section7" class="content-item">
            <span class="num">07</span>
            <h2 class="title">Section7</h2>
            <figure class="img-Wrap">
                <div class="img"></div>
            </figure>
            <p class="desc">Faith makes all things possible.</p>
        </section>
        <!-- //section7 -->

        <section id="section8" class="content-item">
            <span class="num">08</span>
            <h2 class="title">Section8</h2>
            <figure class="img-Wrap">
                <div class="img"></div>
            </figure>
            <p class="desc">Time you enjoy wasting is not wasted time.</p>
        </section>
        <!-- //section8 -->

        <section id="section9" class="content-item">
            <span class="num">09</span>
            <h2 class="title">Section9</h2>
            <figure class="img-Wrap">
                <div class="img"></div>
            </figure>
            <p class="desc">Don’t dream it, be it.</p>
        </section>
        <!-- //section9 -->
    </div>
    <!-- //paraCont -->
</main>

.paraNav {
    top: 20px;
    transition: top 0.4s ease;
}
.paraNav.hide {
    top: -200px;
}
.paraNav li a {
    width: auto;
    padding: 5px 20px;
}
.paraNav li.active a {
    border-radius: 30px;
}

document.querySelectorAll(".paraNav ul li a").forEach(li => {
    li.addEventListener("click", e => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior: "smooth"
        });
    });
});

let nowScrollTop;
let lastScrollTop = 0;

function scrollProgress(){
    nowScrollTop = true;

    setTimeout(() => {
        if(nowScrollTop){
            nowScrollTop = false;
            hasScroll();
        }
    }, 500);
}

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

    if(scrollTop >= lastScrollTop){
        document.querySelector(".paraNav").classList.add("hide");
    } else {
        document.querySelector(".paraNav").classList.remove("hide");
    }
    lastScrollTop = scrollTop;

    // 메뉴용
    document.querySelectorAll(".content-item").forEach((item, index) => {
        if(scrollTop >= item.offsetTop){
            document.querySelectorAll(".paraNav ul li").forEach(li => {
                li.classList.remove("active");
            })
            document.querySelector(".paraNav ul li:nth-child("+(index+1)+")").classList.add("active");
        }
    })

    // 출력용
    document.querySelector(".paraScroll span").innerText = parseInt(scrollTop);
}

window.addEventListener("scroll", scrollProgress);