スクロールするとヘッダがシュッと消えるアレを実現するJS「Headroom.js」

Pocket

下の方にスクロールすると、上部のバーがシュッと消えるアレ、ありますよね。アレ。そういうのはHeadroom.jsで簡単に実装できるようです。

シュッと消えるアレとは

ここにアクセスするとこんな画面が表示されますが、

Hide_your_header_on_scroll_-_Headroom_js

↓ 下の方にスクロールすると

Hide_your_header_on_scroll_-_Headroom_js 2

上のバーがシュッと消えるんです。

こういうの欲しいとき、ある。

使い方

ヘッダー部分をこんな感じにマークアップして、

jQueryでこんな感じに指定します。AngularJSのディレクティブにも対応しているようです。

どんな風にアニメーションするかなど、細かいオプションでかなり制御できるようです。詳しくはライブラリのページでご覧ください。

Headroom.js