, ,

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

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

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

Contents

これは何？

Scroll Up Bar とは。

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

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

Browser support

公式に依存している browser API の情報が掲載されており、対応ブラウザ情報などまとめると下記となるようだ。

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

Polyfill

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

Installation

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

% npm install headroom.js --save

例えば Sprockets の append_path に node_modules を追加して require する場合、単体で利用するとこうなる。

//= require headroom.js/dist/headroom.js

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

//= 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 から利用する例。
<header> を grab して class を追加してくれる。

var myElement = document.querySelector("header");
var headroom  = new Headroom(myElement);
headroom.init();

jQuery の例。

$("header").headroom();

CSS

“you must supply your own CSS styles separately.” のとおり、スクロールにあわせてエフェクトをかけるには 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 を見てサンプルソースらしきものをコピペするも、前述の通り自動追加される class 名と異なるため動かない。
サンプルは animate.css をあわせて導入している前提だった。

$("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.