[JS]ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js

スクロールベースのページを実装する時にぴったり！　ヘッダをユーザーのスクロール操作に合わせて表示・非表示するスクリプトを紹介します。スクロールのダウン・アップでclassを付与するので、ヘッダに限らず他にもいろいろと使えそうです。

スクリプトは単体で動作しますが、jQuery/ZeptoやAngularJSのプラグインとしても動作します。

Headroom.js
Headroom.js -GitHub

• Headroom.jsのデモ
• Headroom.jsの使い方

Headroom.jsのデモ

まずは、シンプルなデモから。
スクリプトのページ自体に組み込まれています。

Headroom.js

下にスクロールすると、ヘッダが上部に吸い込まれます。
一旦消えたヘッダは、上にスクロールするとどのポジションからでも表示されます。

この「どのポジションからでも」というのがこのスクリプトの便利なところです。

スクリプトにはさまざまなオプションが用意されており、デモページで楽しめます。
デザインは似ていますが、こちらは「Playroom」です。

デモページ

ヘッダの非表示・表示のタイミングが細かく設定でき、アニメーションのエフェクトも吸い込まれるだけでなく、ぱたっとなったり、くるっとなったり、バウンドしたりします。

Headroom.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="js/headroom.js"></script>

jQuery、Zepto、AngularJSのプラグインとして利用することもできます。それぞれ用のスクリプトが用意されています。

<!--  jQuery/Zepto用 -->
<script src="js/jQuery.headroom.js"></script>

<!--  AngularJS用 -->
<script src="js/angular.headroom.min.js"></script>

Step 2: HTML

HTMLは特にありません。対象となる要素を用意するだけです。

スクリプトを実行すると対象要素に「class="headroom"」を付与します。このclassはスクロールのダウン時・アップ時に変更されます。

<!-- 初期状態 -->
<header class="headroom">

<!-- スクロール ダウン時 -->
<header class="headroom headroom--unpinned">

<!-- スクロール アップ時 -->
<header class="headroom headroom--pinned">

Step 3: JavaScript

まずは、他のスクリプト無しで実装した場合から。
対象となるエレメントを指定し、スクリプトを実行します。

// grab an element
var myElement = document.querySelector("header");
// construct an instance of Headroom, passing the element
var headroom  = new Headroom(myElement);
// initialise
headroom.init(); 

jQuery/Zeptoを使用する場合は、記述はもっとシンプルになります。

$("#header").headroom();

オプションでは表示・非表示のタイミングやエフェクトを設定できます。

$("#header").headroom({
  "tolerance": 7,
  "offset": 205,
  "classes": {
    "initial": "animated",
    "pinned": "flipInX",
    "unpinned": "flipOutX"
  }
});