読者です 読者をやめる 読者になる 読者になる

Miyakawa Blog

ウェブディレクターが日々のことを綴るブログ

jQuery Plugin - Headroom.js の使い方

Headroom.jsについて

Headroom は jQuery の Plugin の1つです。 機能は、ダウンスクロールするとヘッダーが非表示になり、アップスクロールするとヘッダーが再表示されるという軽量な Script です。

Headroom.js http://wicky.nillia.ms/headroom.js/ Headroom の紹介をしているページ WickyNilliams/headroom.js https://github.com/WickyNilliams/headroom.js 必要なファイルはこちらからダウンロードしてください。使い方の説明なども載っているページ

Headroom のニーズ

固定ヘッダーは一般的な手法であり、グローバルメニューなどの配置に利用されます。 ユーザをナビゲートする手段として、ユーザの必要な労力を削減できますが、問題がないわけではありません・・・ 大型スクリーンは横長であり、メニューを残しておくと画面を占有する割合が大きくなります。 モバイル端末の場合もスペースが限られているためメニューが画面を占有してしまう恐れがあります。

使い方

最低これだけのファイルが用意できれば動きます。 ├ jquery.js
├ headroom.js
├ jQuery.headroom.min.js
├ index.html

ソース的には最低限のソースは次の通りです。

<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Headroom</title> </head> <body> <div class="hogehoge"> <!-- ここにグローバルナビゲーションを入れます --> </div> <div class="container"> <!-- ここにコンテンツを入れます --> </div> <a href="<a href="http://jquery-2.0.2.min.js">http://jquery-2.0.2.min.js</a>"> <a href="http://jquery-2.0.2.min.js">http://jquery-2.0.2.min.js</a> </a> <!-- HeadRoom --> <style type="text/css"> .headroom { position: fixed; top: 0; left: 0; right: 0; transition: all .2s ease-in-out; } .headroom--unpinned {top: -100px;} .headroom--pinned {top: 0;} </style> <a href="<a href="http://headroom.js">http://headroom.js</a>"> <a href="http://headroom.js">http://headroom.js</a> </a> <a href="<a href="http://jQuery.headroom.min.js">http://jQuery.headroom.min.js</a>"> <a href="http://jQuery.headroom.min.js">http://jQuery.headroom.min.js</a> </a> $(".hogehoge").headroom(); </body> </html>

およそこんな感じです。 hogehoge部分が一致していれば動きます。 必要に応じて変更して使ってみてください。 ID 指定でも動くはずです。 なお、17行目以下の CSS 設定も一緒に使ってください。

アニメーション効果をかけることもできます

アニメーション効果をかけることもできますが、まだ、そこまで調整できていません。

次のページをみて設定すればできるようです。 時間ができたらこれでまた遊んでみようと思います。

Headroom.js playground http://wicky.nillia.ms/headroom.js/playroom/ アニメーション効果を設定し、プロパティ値を生成してくれるジェネレータページ。 Animate.css | Just-add-water CSS Animations https://daneden.me/animate/ アニメーション効果をかけるための CSS と jQuery Plugin のページ