Headroom.jsの使い方備忘録。

Headroom.jsは下にスクロールしたときにヘッダーを非表示にし、
上にスクロールしたときにヘッダーを表示させます。

スマホアプリのFacebookなどで取り入れられているような動きです。

Headroom.jsのページに行けば動きがわかると思います。

Headroom.js

ダウンロードはHeadroom.jsのヘッダーにあるGitHubのリンク先で
右下にある「Download zip」からファイルをダウンロードできます。

読み込み

jQuery以外を使う方法もあるそうですが、
今回はjQueryで。

ダウンロードしたフォルダのdist内にある
「headroom.min.js」と「jQuery.headroom.min.js」を読み込みます。

<script type='text/javascript' src='js/headroom.min.js'></script>
<script type='text/javascript' src='js/jQuery.headroom.min.js'></script>

HTMLの記述

htmlではヘッダー部分のタグにclassを付けるだけです。

<header class="headroom">

このclassをつけたタグにスクロールに応じてclassがふられる仕組みです。

<!-- 初期値 -->
<header class="headroom">
<!-- 下へスクロールしたとき -->
<header class="headroom headroom--unpinned">
<!-- 上へスクロールしたとき -->
<header class="headroom headroom--pinned">

jQueryの記述

jQueryには以下を書き足すだけです。

$(".headroom").headroom();

これだけでも動くブラウザはあるのですが、
スマホのブラウザで動かないということがありました。

オプションを設定してみると、プラグイン自体が動かなくなったり…

原因は分かりませんが、CSSを追加することで解決しました。

CSSの記述

.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s linear;}
.headroom--unpinned {top: -60px;}
.headroom--pinned {top: 0;}

これで、スマホのブラウザでも動くようになりました。

PCではどのブラウザでもきれいに動きますが、
iPhoneのChromeでは下にスクロールして止めたときヘッダーが非表示、
上にスクロールして止めたときヘッダー表示とちょっとぎこちない動きになります。

iPhoneやAndroidで差があるかもしれませんが。

最近よく取り入れられている動きを簡単に実装できるのでオススメです。