Parallax Effect03

parallaxEffect03

패럴랙스 이펙트03번 - 모바일 웹페이지 형식처럼 스크롤을 아래로 내리면 상단의 메뉴바가 사라지고, 위로 드래그하면 메뉴바가 나타나도록 하였습니다.
스크롤이 하단 끝에 도달하면 Top 버튼이 하단 중앙부에서 올라와 클릭시 최상단으로 올라가도록 기능을 만들었습니다.

---

원본 소스 보기 원본 사이트 보기

HTML

패럴랙스 2번과 동일한 구조에 Top 버튼을 추가하기 위해 parallax__top 영역을 추가하였습니다.

<nav id="parallax__nav">
    <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>
<!-- //parallax__nav -->

<div id="parallax__top">
    Top
</div>
<!-- //parallax__top -->

<main id="parallax__cont">
    <div id="contents">
        <section id="section1" class="content__item">
            <span class="content__item__num">01</span>
            <h2 class="content__item__title">section1</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">내일은 내일의 태양이 뜬다.</p>
        </section>
        <!-- //section1 -->

        <section id="section2" class="content__item">
            <span class="content__item__num">02</span>
            <h2 class="content__item__title">section2</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">삶이 있는 한 희망은 있다.</p>
        </section>
        <!-- //section2 -->

        <section id="section3" class="content__item">
            <span class="content__item__num">03</span>
            <h2 class="content__item__title">section3</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">먼저 자신을 비웃어라, 다른 사람이 당신을 비웃기 전에.</p>
        </section>
        <!-- //section3 -->
        ...
    </div>
</main>
<!-- //main -->

<aside id="parallax__info">
    <div class="scroll">scrollTop : <span>0</span>px</div>
</aside>
<!-- //parallax__info -->

JAVASCRIPT

우선적으로, 스크롤의 위치값 찾기 위해 scrollTop값을 변수에 저장/출력합니다.
scrollTop값은 ceil 수학 메서드를 사용하여 소수점 숫자를 올림값으로 반환되도록 처리합니다.
추가한 Top버튼이 나타나는 스크롤 위치값을 구하기 위해 전체 문서 높이 값 - 브라우저 높이 값이 브라우저의 scrollTop값 보다 작다면 Top 버튼이 보이도록 이벤트를 부여합니다.
추가적으로 Top버튼을 클릭시 최상단으로 올라가는 효과를 부드럽게하는 이벤트를 추가합니다.

트리거 변수를 사용하여, 스크롤이 실행되면 now Scroll = true가 되어 if문이 실행되고 다시 now Scroll = false로 바뀌면서 hasScroll 함수가 실행되도록 했습니다.
(now scroll = false로 바꾸는 이유는 스크롤 이동시에만 hasScroll 함수를 실행시키기 위함)
hasScroll 함수는 scrollTop값이 lastScroll보다 작다면, 상단의 메뉴바가 하단 스크롤시 사라지고 / 상단 스크롤시 나타나도록 합니다.
(lastScroll = scrollTop 은 lastScroll값에 scrollTop값을 적용시켜 함수 재실행을 위함)

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

    //01
    // if(scrollTop > 0){
    //     document.querySelector("#parallax__nav").classList.add("show");
    // } else {
    //     document.querySelector("#parallax__nav").classList.remove("show");
    // } // 스크롤바 0보다 커지면 메뉴가 나옵니다.

    // 02
    if (scrollTop > (document.body.scrollHeight - window.outerHeight)) {
        document.querySelector("#parallax__top").classList.add("show");
    } else {
        document.querySelector("#parallax__top").classList.remove("show");
    }

    document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop);
})

// top 버튼
document.querySelector("#parallax__top").addEventListener("click", () => {
    window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
});

//03
let nowScroll = true;
let lastScroll = 0;

function scrollProgress() {
    nowScroll = true;

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

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

    if (scrollTop < lastScroll) {
        document.querySelector("#parallax__nav").classList.add("show");
    } else {
        document.querySelector("#parallax__nav").classList.remove("show");
    }
    lastScroll = scrollTop;
}

window.addEventListener("scroll", scrollProgress);