Headroom.js - 스크롤을 감지하여 반응하는 요소

몇몇 애플리케이션에서 스크롤에 따라 하단의 광고가 등장하거나 상단의 메뉴가 등장하는 등의 사용자 편의를 고려한 디자인을 접해보셨을 겁니다. 관련하여 많은 스니핏(코드조각)이 존재하는데 그 중에서 한가지를 소개합니다.

Headroom.js 소개

헤드룸(Headroom)은 사용자의 스크롤을 감지하여 원하는 요소에 동작을 추가하는 가벼운 고성능의 자바스크립트 위젯이다. 이는 상단의 네비게이션에 자주 애용되고 있으며, 기존의 고정(Fixed)된 네비게이션이 차지하는 화면의 비율을 없애고 사용자의 반응에 따라 등장함으로써 좀 더 유연하게 화면의 가시영역을 확보한다.

HOME

Headroom.js

REPO

WickyNilliams/headroom.js

DEMO

데모페이지

브라우저 지원

헤드룸은 아래의 브라우저 API들에 의존하기 때문에 구형 브라우저에는 제약이 있다(각 목록의 링크를 따라가면 브라우저 지원사항을 알 수 있다).

• requestAnimationFrame
• classList
• Function.prototype.bind

이러한 API들은 구형 브라우저를 위한 폴리필(polyfill)들에 의해 대체방안을 마련할 수 있으며, 원한다면 지원 가능한 브라우저들만에서만 적용할 수 있다.

• request-frame
• classList.js : IE8+
• Function.prototype.bind()

비슷한 기능을 흉내내는 스니핏들이 존재하기 때문에 구형 브라우저 지원을 위해서라면 그 쪽으로 알아보는 것이 현명할지도 모르겠다.

Headroom.js 작동원리

헤드룸의 기초가 되는 원리는 스크롤 이벤트에 반응하여 클래스를 추가하고, 제거하는 동작이다.

<!-- initially -->
<header class="headroom">

<!-- scrolling down -->
<header class="headroom headroom--unpinned">

<!-- scrolling up -->
<header class="headroom headroom--pinned">

헤드룸이 적용되면 스크롤의 움직임에 따라 지정한 클래스명이 추가되거나 삭제되며, 해당 클래스로 발생시킬 수 있는 동작을 정의하면 된다. 클래스를 사용할 수 있다는 것은 복수의 요소에 복수의 동작을 부여할 수 있는 유연성을 제공한다는 것을 의미한다.

Headroom.js 사용법

자바스크립트와 jQuery, Zepto, AngularJS 를 지원하며, 홈페이지를 참조하여 추가적인 설정방법을 확인할 수 있다.

일반 자바스크립트버전 초기화

headroom.js 파일을 삽입한 후 :

// 적용될 요소를 선택
var myElement = document.querySelector("header");

// 전달할 헤드룸 인스턴스를 생성
var headroom  = new Headroom(myElement);

// 초기화
headroom.init(); 

jQuery버전 초기화

headroom.js와 jQuery.headroom.js 파일 두가지를 모두 삽입한 후:

// 간단하게 초기화
$("#header").headroom();

또한, data-* API를 제공하니 HTML에서 바로 초기화도 가능하다.

<!-- selects $("[data-headroom]") -->
<header data-headroom>

옵션

헤드룸은 옵션 객체를 이용해 동작하는 방식을 변경할 수 있다. Headroom.options 을 검사하여 기본 옵션을 볼 수 있으며, 옵션 객체의 구조는 아래와 같다 :

{
    // 고정된 요소가 처음으로 해제되어 사라질 수직 위치 픽셀 값 (이 값이 0이면 스크롤되자 마자 작동) 
    offset : 0,
    // 상태 변경이 시작되는 픽셀의 스크롤 허용 오차
    tolerance : 0,
    // 또는 스크롤 위/아래에 따라 개별적으로 지정도 가능
    tolerance : {
        up : 5,
        down : 0
    },
    // 적용될 CSS 클래스들
    classes : {
        // 요소가 초기화될때 추가되는 클래스명
        initial : "headroom",
        // 스크롤 위로일때 추가되는 클래스명
        pinned : "headroom--pinned",
        // 스크롤 아래일때 추가되는 클래스명
        unpinned : "headroom--unpinned",
        // 스크롤이 offset에 지정된 값 안에 있을때 추가되는 클래스명
        top : "headroom--top",
        // 스크롤이 offset에 지정된 값 밖에 있을때 추가되는 클래스명
        notTop : "headroom--not-top"
    },
    // element to listen to scroll events on, defaults to `window`
    scroller : someElement,
    // callback when pinned, `this` is headroom object
    onPin : function() {},
    // callback when unpinned, `this` is headroom object
    onUnpin : function() {},
    // callback when above offset, `this` is headroom object
    onTop : function() {},
    // callback when below offset, `this` is headroom object
    onNotTop : function() {},
}

CSS

위에서 살펴봤듯이, 헤드룸을 초기화한 후에 스크롤의 반응에 따라 옵션에서 설정된 클래스들이 추가되고 삭제되기를 반복한다. 이 클래스들을 이용하여 원하는 동작을 추가하고 제거하는 것은 사용자의 몫이다. 아래는 스크롤에 따라 요소를 보여주거나 숨기는 간단한 예제이다.

.headroom--pinned {
    display: block;
}
.headroom--unpinned {
    display: none;
}

이러한 동작을 좀 더 동적으로 표현하기 위해 CSS의 transform 과 transition, keyframes 등을 이용한 각종 애니메이션 효과를 부여할 수도 있다. 검색을 통해 다양한 CSS 애니메이션 효과를 적용해 보길 바라며 Animate.css 와 같은 사이트가 도움이 될 터이다.

문서의 헤더부분을 네비게이션으로 사용하는 디자인에서 스크롤에 반응하여 헤더를 숨기고 등장시키는 애니메이션을 위해 아래와 같이 사용하였다.

headroom.js를 문서에 삽입하고, 옵션을 원하는데로 수정하여 초기화했다.

var myElement = document.getElementById("site-header");      
var headroom  = new Headroom(myElement, {
    "tolerance": 10,    
    "offset": 205,   
    "classes": {    
         "initial": "animated",    
         "pinned": "slideDown", 
         "unpinned": "slideUp", 
         "top": "headroom--top", 
         "notTop": "headroom--not-top"  
    }
});
headroom.init();

HTML 구조는 아래와 같다.

<header id="site-header" class="site-header animated">

사용된 CSS는 아래와 같다.

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

/* Animated for headroom */
.animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* SlideDown for headroom */
.animated.slideDown{
	-webkit-animation-name:slideDown;
	animation-name:slideDown;
}
@-webkit-keyframes slideDown{
	0%{-webkit-transform:translateY(-100%)}
	100%{-webkit-transform:translateY(0)}
}
@keyframes slideDown{
	0%{transform:translateY(-100%)}
	100%{transform:translateY(0)}
}

.animated.slideDown {
  -webkit-animation-name: slideDown;
  animation-name: slideDown;
}

/* SlideUp for headroom */
.animated.slideUp{
	-webkit-animation-name:slideUp;
	animation-name:slideUp;
}
@-webkit-keyframes slideUp{
	0%{-webkit-transform:translateY(0)}
	100%{-webkit-transform:translateY(-100%)}
}
@keyframes slideUp{
	0%{transform:translateY(0)}
	100%{transform:translateY(-100%)}
}

.animated.slideUp {
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
}