스크롤 방향에 따른 네비게이션 보이기, 감추기

 

HTML

<header>
    <div class="container">
        <h1><a href="/">Logo</a></h1>
        <nav>
            <h2 class="hidden">글로벌 네비게이션</h2>
            <ul class="nav">
                <li><a href="/about"><h3>menu1</h3></a></li>
                <li><a href="/shop/main"><h3>menu2</h3></a></li>
                <li><a href="/pin/pin_send"><h3>menu3</h3></a></li>
                <li><a href="/charge/charge"><h3>menu4</h3></a></li>
                <li><a href="javascript:alert('준비중입니다.');"><h3>menu5</h3></a></li>
            </ul>
        </nav>
    </div>
</header>

 

 

CSS

/* header */
header{position:fixed; left: 0; top: 0; width: 100%; z-index:99; background:none; transition:top .3s, background .3s;}
header::after{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; background:linear-gradient(90deg, rgba(0,198,255,1) 55%, rgba(8,228,168,1) 100%); opacity: 0; transition:opacity .3s;}
    header.hide{position:fixed; top: -5rem;}

#wrap header.scroll::after{opacity: 1;} /* scroll 일때만 배경 나오게 */
#wrap.sub header::after{opacity: 1;}    /* sub에선 항상 배경 나오게 */

 

 

 

JS

// 스크롤 시 헤더
$( function(){

    var lastScrollTop = 0;
    var delta = 5;
    var fixBox = document.querySelector('header');
    var fixBoxHeight = fixBox.offsetHeight;
    var didScroll;

    //스크롤 이벤트 
    window.onscroll = function() {
        didScroll = true;
    };

    setInterval(function(){ //0.1초마다 스크롤 여부 체크하여 스크롤 중이면 hasScrolled() 호출
        if(didScroll){
            hasScrolled();
            didScroll = false;
        }
    }, 100);

    function hasScrolled(){
        let nowScrollTop = window.scrollY;
        console.log(nowScrollTop, lastScrollTop);

        if(Math.abs(lastScrollTop - nowScrollTop) <= delta){ return; }
        if(nowScrollTop > lastScrollTop && nowScrollTop > fixBoxHeight){    //Scroll down
            
            fixBox.classList.add('hide');
        }else{
            if(nowScrollTop + window.innerHeight < document.body.offsetHeight){ //Scroll up
                fixBox.classList.remove('hide');
            }
        }
        lastScrollTop = nowScrollTop;

        if( nowScrollTop > 0 ){
            fixBox.classList.add('scroll'); // scroll 클래스 일때만 배경 나옴
        } else {
            fixBox.classList.remove('scroll');
        }
    }
    hasScrolled();  // 초기 1회 실행 

});