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

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

シュッと消えるアレとは

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

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

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

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

使い方

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

 ... 

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

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

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

Headroom.js