jQuery

【jQuery】Animate.cssを使ってスクロールイベントを面白く。Headroom.js

April 10, 2016
headroom.js

Headroom.jsはユーザーのスクロールに対応した軽量、高性能なJSウィジェットです。
ヘッダーはスクロールダウンしたときにビューの外にスライドし、スクロールアップするときにバックスライドし表示されます。

【jQuery】スクロールするとヘッダーに固定されるスティッキープラグイン10選でHeadroom以外のスティッキーもご紹介しています。よろしければこちらもご覧ください。

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="src/headroom.js"></script>
<script src="src/jQuery.headroom.js"></script>

CSS

.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}

動作

headroom.jsによって追加および削除されるクラス

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

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

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

JS

$("header").headroom();

オプション

{
    // vertical offset in px before element is first unpinned
    offset : 0,
    // scroll tolerance in px before state changes
    tolerance : 0,
    // or scroll tolerance per direction
    tolerance : {
        down : 0,
        up : 0
    },
    // element which is source of scroll events. Defaults to window
    scroller : element,
    // css classes to apply
    classes : {
        // when element is initialised
        initial : "headroom",
        // when scrolling up
        pinned : "headroom--pinned",
        // when scrolling down
        unpinned : "headroom--unpinned",
        // when above offset
        top : "headroom--top",
        // when below offset
        notTop : "headroom--not-top",
        // when at bottom of scoll area
        bottom : "headroom--bottom",
        // when not at bottom of scroll area
        notBottom : "headroom--not-bottom"
    },
    // 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() {}
    // callback at bottom of page, `this` is headroom object
    onBottom : function() {},
    // callback when moving away from bottom of page, `this` is headroom object
    onNotBottom : function() {}
}

Animation

Animate.cssが必要になります。

$("header").headroom({
  "offset": 205,
  "tolerance": 5,
  "classes": {
    "initial": "animated",
    "pinned": "slideDown",
    "unpinned": "slideUp"
  }
});

// to destroy
$("#header").headroom("destroy");

詳しくはheadroom.js playroomをご覧ください。

MIT
Demo/Download