[jQuery] Headroom.js: 下スクロールで隠れる Scroll Up Bar

公開日: 2016/05/12
更新日: 2018/10/15

ページを下にスクロールするときは隠されていて、上にスクロールするときは表示されるナビバー。

[markdown]
## これは何？

Scroll Up Bar とは。

> * [Webデザイントレンド定点観測上スクロール時だけ表示されるナビ「スクロールアップバー」 | Adobe Creative Station](https://blogs.adobe.com/creativestation/web-list-trend-07-scrollup-bar)

Headroom.js のガイドをよく読まずにサンプルを動かそうとしたら、動かなかったのでちょっとまとめておく。

> * [WickyNilliams/headroom.js: Give your pages some headroom. Hide your header until you need it](https://github.com/WickyNilliams/headroom.js)
> * [Playroom – Headroom.js](http://wicky.nillia.ms/headroom.js/playroom/)

こちらを参考にさせて頂きました。

> * [[JS]ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js | コリス](http://coliss.com/articles/build-websites/operation/javascript/js-headroom.html)
> * [Headroom.jsメモ](https://38elements.github.io/2014/01/13/headroomjs.html)
> * [上にスクロールすると表示される使い勝手のよい固定ヘッダー「Headroom.js」｜cowcow blog](http://cow2design.com/js-headroomjs#)

## Browser support

[公式](https://github.com/WickyNilliams/headroom.js#browser-support)に依存している browser API の情報が掲載されており、対応ブラウザ情報などまとめると下記となるようだ。

* [requestAnimationFrame](http://caniuse.com/#feat=requestanimationframe) – IE10, safari 6, iOS6 が対応していない。
* [classList](http://caniuse.com/#feat=classlist) – IE10, android 3 が対応していない。
* [Function.prototype.bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Browser_compatibility) – IE9 が対応していない。

> * [Improve documentation · Issue #2 · WickyNilliams/headroom.js](https://github.com/WickyNilliams/headroom.js/issues/2)

つまり Modern Browser、及び IE11+ で動く。
これ以外に対応する場合は、Shims, Fallbacks, またの名を Polyfills しておけば利用できるとのこと。

### Polyfill

Polyfill して動かさねばならない要件は事前に避けるので、個人的には試したことはない。
下記ページが大変参考になる。

> * [HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)

## Installation

JavaScript 単体で動作可能。jQuery, Zepto, AngularJS のプラグインとしても動作する。

“`prettyprinted
% npm install headroom.js –save
“`

例えば [Sprockets の append_path に node_modules を追加して require する場合](https://www.d-wood.com/blog/2016/04/08_7906.html)、単体で利用するとこうなる。

“`prettyprinted
//= require headroom.js/dist/headroom.js
“`

jQuery プラグインとして利用するとこうなる。

“`prettyprinted
//= require jquery/dist/jquery.js
//= require headroom.js/dist/headroom.js
//= require headroom.js/dist/jQuery.headroom.js
“`

> Include the headroom.js and jQuery.headroom.js scripts in your page
のとおり、headroom.js も必要だった。

## Usage

### JavaScript

JavaScript から利用する例。
`

` を grab して class を追加してくれる。

“`javascript
var myElement = document.querySelector(“header”);
var headroom = new Headroom(myElement);
headroom.init();
“`

jQuery の例。

“`javascript
$(“header”).headroom();
“`

### CSS

“you must supply your own CSS styles separately.” のとおり、スクロールにあわせてエフェクトをかけるには CSS が必要だった。

“`css
// layout
header {
position: fixed;
top: 0; left: 0; right: 0;
}
// for Headroom.js default classes
.headroom {
transition: all .8s linear;
}
.headroom–unpinned {
top: -80px;
opacity: .2;
}
.headroom–pinned {
transition: all .2s ease-in-out;
}
“`

`.headroom*` という class が自動で追加されるので、そこにスタイルをあてる。

### option

[Playroom – Headroom.js](http://wicky.nillia.ms/headroom.js/playroom/) を見てサンプルソースらしきものをコピペするも、前述の通り自動追加される class 名と異なるため動かない。
サンプルは [animate.css](https://github.com/daneden/animate.css) をあわせて導入している前提だった。

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

前述の CSS を利用するならば、`classes` の指定は不要となる。

## Sample

もろもろまとめて動くサンプルは、以下の通り。

See the Pen Headroom.js sample code by DriftwoodJP (@DriftwoodJP) on CodePen.

[/markdown]