운영중이던 티스토리 실험실(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값을 입력하시면 됩니다.

    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon 뭐하라
      2017.03.16 23:08 신고

      참고로 Material T에서의 상단바 높이는 56px이고 id값은 #header 입니다