fixed보다 좋은, 스크롤에 반응해 사라지고 보이는 헤더 코드

단순히 position:fixed 스타일로 사이트 헤더나 네비게이션을 고정시키는 것보다, 스크롤에 반응해 화면을 내리면 사라지고, 올리면 나타나는 헤더가 훨씬 훌륭한 방식이다. 스크롤에 반응하는 헤더란, 이렇게 더 효율적이고 쾌적한 사용자 경험을 제공할 수 있는 사이트 로고나 메뉴, 내비게이션 바 등을 말한다.

스크롤에 반응하는 헤더를 써야 하는 이유

사용자에게 헤더나 내비게이션 바를 항상 보여주고 싶은 욕심에, 화면 상단에 100px 미만 정도의 공간을, 계속해서 본인 사이트나 블로그의 로고와 메뉴 등이 졸졸 따라오게 꾸며놓은 사람들이 많다. 이 방식은 데스크탑 화면에서는 크게 상관이 없을 수도 있다. 하지만 평균적으로 세로 사이즈가 600px이 채 되지 않는 모바일 사용자에게 최소 화면의 1/6을 항상 가려버리고(자체 브라우저의 네비게이션도 고려하면 1/3~1/4 정도가 가려지기도 한다.), 사용자가 숨기거나 컨트롤 할 수도 없어 상당히 폭력적(?)인 불편함을 안겨준다.

그 때문에 (주관적인 생각으로)사용자의 편의나 네비게이션을 위한답시고 화면 상단에 항상 헤더를 고정시켜놓으면 안된다. 언제나 구현되는 헤더를 원한다면, 사용자가 콘텐츠를 읽으려고 스크롤을 내리거나 터치할 때에는 헤더가 사라지고, 콘텐츠나 글을 다 읽고 메뉴를 보고싶거나 내비게이션 기능을 사용하고 싶어 화면을 위로 스크롤 하거나 터치를 하면, 그때 다시 나타나는 헤더를 구현해야 한다(물론 이 방식도 잠깐 위의 내용을 다시 보려는 사용자에겐 불편할 수도 있다). 개인적으로 이렇게 구현하지 못할 거라면 그냥

position:fixed 의 기능 자체를 사용하지 않는 것을 권장한다.

스크롤에 반응하는 헤더를 만드는 방법 3단계

스크롤에 반응하는 헤더를 만들기 위해선 여러 가지 방법을 사용할 수 있다. 하지만 어떤 환경에서나 표현되는 웹 표준을 생각해, CSS 등의 방법을 사용하는 것보다 jQuery를 이용한 방법을 추천한다. 개꿀몬(GKKmon)도 왠만해선 자바스크립트나 jQuery를 사용하지 않으려고 하지만(기본적인 기능을 사용하는 것 보다 속도나 리소스 면에서 뒤떨어질 확률이 높기 때문), 스크롤에 반응하는 헤더는 이것저것 써 본 결과 jQuery 방식이 성능도 크게 해치지 않고 훌륭한 웹 표준 성을 보여줬기 때문이다.

jQuery를 사용하려면
1. jQuery 플러그인을 불러오고.
2. 불러온 jQuery 플러그인에서 사용할 스크립트를 선언하고.
3. 그에 맞춰서 HTML이나 PHP, 그리고 CSS를 손봐야 한다.

jQuery 플러그인 불러오기

스크롤에 반응하는 헤더를 만들기 위한 플러그인은 jQuery-2.2.2 버전이다. 이 플러그인 불러오려면

<script src="https://code.jquery.com/jquery-2.2.2.js"></script>

를 선언하면 된다.

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

을 사용하면 버전 뒤에 min이 붙어서, 같은 코드지만 공백 등을 제거해 더욱 빠르게 로드시킬 수 있으니 이 방법을 사용하자.

불러온 jQuery 플러그인에서 스크립트 선언

플러그인을 불러왔으면 어떤 스크립트를 사용할 것인지 선언해야 한다.

<script>
$(function () {
    var lastScrollTop = 0,
        delta = 15;
    $(window).scroll(function (event) {
        var st = $(this).scrollTop();
        if (Math.abs(lastScrollTop - st) <= delta) return;
        if ((st > lastScrollTop) && (lastScrollTop > 0)) {
            $("요소명").css("top", "-숨길 높이");
        } else {
            $("요소명").css("top", "0px");
        }
        lastScrollTop = st;
    });
});
</script>

요소명에 컨트롤할 요소의 class나 id를 넣는다. 보통 .header 라던지 넣으면 된다. 숨길 높이에는 숨길 때 -px 등으로 화면 위로 날려버리는 것이기 때문에, 해당 요소와 같은 높이나 더 큰 높이를 설정해야 한다. height:50px 짜리 클래스 네임 .header를 컨트롤하고 싶다면

<script>
$(function () {
    var lastScrollTop = 0,
        delta = 15;
    $(window).scroll(function (event) {
        var st = $(this).scrollTop();
        if (Math.abs(lastScrollTop - st) <= delta) return;
        if ((st > lastScrollTop) && (lastScrollTop > 0)) {
            $(".header").css("top", "-50px);
        } else {
            $(".header").css("top", "0px");
        }
        lastScrollTop = st;
    });
});
</script>

라고 선언하면 된다. 이 스크립트의 내용은 ‘터치나 마우스 스크롤로 화면이 내려가는 걸 감지하면 .header의 CSS top을 -50px으로 바꾸고, 스크롤이 위로 올라가면 .header의 CSS top을 0px로 바꾼다’ 라는 뜻이다.

CSS는 요소들의 스타일을 지정하고, top은 position 속성으로 지정한 요소의 화면 상단에서부터의 위치를 지정한다. 즉 화면 최상단 0px과 -50px을 왔다 갔다 하게 되는 것이다.

jQuery와 스크립트에 맞춰서 CSS를 변경

마지막으로 jQuery 설정에 맞춰서 CSS를 변경해주면 된다.

<style>
.header{
position:fixed;
/* position:fixed 를 사용해 고정시킨다 */
z-index:20;
/* 다른 요소들에게 가려질 수 있으니 적절한 z-index 를 설정한다 */
width:100%;
/* 화면 100%의 가로 크기와 */
height:50px;
/* 세로로 50px의 헤더를 만든다 */
box-sizing:border-box;
transition: All 0.2s ease;
/* 사라지고 나타날때 부드럽게 보이는 효과를 준다, 꼭 넣지 않아도 된다 */
-webkit-transition: All 0.2s ease;
-moz-transition: All 0.2s ease;
-o-transition: All 0.2s ease;
}
</style>

이 세가지를 모두 합치면 스크롤에 반응해 사라지고 보이는 훌륭한 헤더를 만들 수 있다.

완성된 코드

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

<script>
$(function () {
    var lastScrollTop = 0,
        delta = 15;
    $(window).scroll(function (event) {
        var st = $(this).scrollTop();
        if (Math.abs(lastScrollTop - st) <= delta) return;
        if ((st > lastScrollTop) && (lastScrollTop > 0)) {
            $(".header").css("top", "-50px);
        } else {
            $(".header").css("top", "0px");
        }
        lastScrollTop = st;
    });
});
</script>

<style>
.header{
position:fixed;
z-index:20;
width:100%;
height:50px;
box-sizing:border-box;
transition: All 0.2s ease;
-webkit-transition: All 0.2s ease;
-moz-transition: All 0.2s ease;
-o-transition: All 0.2s ease;
}
</style>

설명대로 설정한다면 손쉽게 훌륭한 사용자경험을 선사하는 고퀄리티의 헤더를 가질 수 있다. 별거 아닌 거 같아도, 당신의 사이트나 블로그에 24시간 365일 항상 떠 있는 헤더를 위한 것이니 꼭 수정하도록 하자. 본인은 익숙하고 자신의 사이트니까 좋을지 몰라도, 항상 고정되어서 화면을 가리는 ‘툴바’같은 헤더는 사용자에게 최악의 사용자 경험을 선사해주기 때문이다.