스크롤에 반응하는 sticky header 만들기

내비게이션 메뉴에 대한 접근성을 높이기 위해
스크롤에 상관없이 header를 항상 화면 상단에 고정시키는 sticky header를 많이들 사용한다.
페이지 어디서든 header 메뉴에 접근할 수 있지만 항상 header 높이 만큼 컨텐츠를 가리게 된다.

스크롤에 반응하는 sticky header를 만들면

스크롤을 내릴 때는 header를 숨기고, 스크롤을 올릴 때는 다시 header를 보여주고

일반적인 sticky header의 단점을 보완할 수 있다.

🚩html, css

html과 css는 일반적인 sticky header와 동일하다.
position이 fixed인 header를 만들고
container에 header 높이 만큼 상단 padding을 준다.

<div class="container">
  <header>header</header>
  <section>
    contents..
  </section>
</div>

.container { position:relative; padding-top:50px; }
header { position:fixed; top:0; left:0; width:100%; height:50px; background-color:#222; color:#fff; text-align:center; font-size:24px; font-weight:bold; }
section { height:3000px; } /* 스크롤을 위해 임의로 height를 줬다. */

✨script

원리는 간단하다.

1. 현재의 스크롤 위치를 기준점으로 저장
2. 스크롤 이벤트 발생
3. 스크롤이 멈춘 위치를 기준점과 비교
4. scroll down, scroll up 조건 분기하여 동작 실행
5. 현재 멈춘 스크롤 위치를 기준점으로 재설정

Jquery로 작성했다.

$(function () {
    var didScroll;
    var lastScrollTop = 0;
    var delta = 5; // 이벤트를 발생시킬 스크롤의 이동 범위
    var navbarHeight = $("header").outerHeight();

    $(window).scroll(function(event){
        didScroll = true;
    });

    setInterval(function() {
        if (didScroll) {
            hasScrolled();
            didScroll = false;
        }
    }, 250); // 스크롤이 멈춘 후 동작이 실행되기 까지의 딜레이

    function hasScrolled() {
        var st = $(this).scrollTop(); // 현재 window의 scrollTop 값

        // delta로 설정한 값보다 많이 스크롤 되어야 실행된다.
        if(Math.abs(lastScrollTop - st) <= delta)
            return;

        if (st > lastScrollTop && st > navbarHeight){
            // 스크롤을 내렸을 때
            $("header").slideUp("fast"); // header 숨기기
        } else {
            // 스크롤을 올렸을 때
            if(st + $(window).height() < $(document).height()) {
                $("header").slideDown("fast"); // header 보이기
            }
        }

        lastScrollTop = st; // 현재 멈춘 위치를 기준점으로 재설정
    }
})

😍example

화면이 작은 모바일에서 더욱 유용해 보이는 UI/UX다.
header 뿐만이 아니라 scroll up/down에 반응하는 동적효과 구현에도 유용해 보인다.