아래로 스크롤하면 사라졌다가 위로 스크롤하면 나타나는 상단바

운영중이던 티스토리 실험실(http://tistory-lab.tistory.com) 블로그를 정리하기위해 본 블로그로 포스팅 이동합니다.

-------------------------------------------

제목이 좀 길죠? ^^

모바일 화면은 안그래도 작은데 상단에 고정된 네비게이션바가 자리를 차지하고있습니다. 

참조:

https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c

모바일이라면 바로 확인 가능하고, 데스크탑이라면 브라우져 크기를 줄여서 모바일 크기에서 스크롤을 올렸다내렸다하면 확인할 수 있습니다.

적용 방법

Fastboot 스킨 사용중이라면 그대로 적용하시면 되고, 다른 스킨이라면 약간의 수정이 필요합니다.

CSS에 다음을 추가합니다.

.nav-up {

    top: -50px;

    transition:0.2s;

}

50px은 본인의 상단바 높이만큼으로 설정해주세요.

HTML에서 </body> 윗줄에 다음을 추가합니다.

<script>

// Hide Header on on scroll down

var didScroll;

var lastScrollTop = 0;

var delta = 5;

var navbarHeight = $('#fixedNav').outerHeight();

$(window).scroll(function(event){

    didScroll = true;

});

setInterval(function() {

    if (didScroll) {

        hasScrolled();

        didScroll = false;

    }

}, 250);

function hasScrolled() {

    var st = $(this).scrollTop();

    // Make sure they scroll more than delta

    if(Math.abs(lastScrollTop - st) <= delta)

        return;

    // If they scrolled down and are past the navbar, add class .nav-up.

    // This is necessary so you never see what is "behind" the navbar.

    if (st > lastScrollTop && st > navbarHeight){

        // Scroll Down

        $('#fixedNav').removeClass('nav-down').addClass('nav-up');

    } else {

        // Scroll Up

        if(st + $(window).height() < $(document).height()) {

            $('#fixedNav').removeClass('nav-up').addClass('nav-down');

        }

    }

    lastScrollTop = st;

}

</script>

붉게 표시된 부분은 본인의 상단바 id값을 입력하시면 됩니다.