上にスクロールすると表示される使い勝手のよい固定ヘッダー「Headroom.js」

最近スマートフォンのアプリで良く見かける、下にスクロールすると非表示になり、上にスクロールとすると表示される固定ヘッダー。Headroom.jsを利用すると簡単に実装できます。

headroom js

公式サイト | デモ

表示・非常時までの時間を細かく設定でき、立体的に折りたたむなど様々なアニメーションを設定できます。

使い方

Headeroomは「javascriptのみ」「jQuery」「AngularJS」と3種の実装方法がありますが、今回はjQueryで紹介します。詳細はheadroom.jsの公式サイトをご覧ください。ただしサイトに書いてある手順で導入しても動かなかったので、改めて紹介したいと思います。

各種ソースをダウンロード

js

Gitからソースをダウンロードします。使用するのは「headroom.js」と「jQuery.headroom.js」
https://github.com/WickyNilliams/headroom.js/archive/master.zip

Animate.css

アニメーションをさせるために、animete.cssもダウンロードしておきます。
http://daneden.github.io/animate.css/

ヘッダーに読み込む

先ほどダウンロードしたファイル「headroom.js」「jQuery.headroom.js」「animate.css」とjQueryを読み込みます。

HTMLにヘッダーを追記

ヘッダーとなる#headerを追加します。

CSSを追加

固定ヘッダーにするため、先ほどの#headerにpostion: fixedを追加します。

javascriptを追加

javascriptを追加して完了です。

また下記ページで、アニメーションの方法や表示・非表示の方法を設定できます。
http://wicky.nillia.ms/headroom.js/playroom/
専用のソースコードが出力されますが、そのままコピーしても動きませんのでお気をつけください。
なお下記の箇所を修正すると動きます。
・slideDown → slideInDown
・slideUp → slideOutUp
・$(“#header”).headroom(“destroy”); → 削除

簡単ですね。

  • このエントリーをはてなブックマークに追加
« »

デザインとカメラとロードバイクと畑

© 2017 cowcow blog