Headroom.jsでメニューをスッキリ【オススメのjQueryプラグイン&使い方】

メニュー_プラグイン

オススメのjQueryプラグイン「Headroom.js」で
メニューをコンパクトに折り畳み!

システムエンジニア(SE)のかっきーです。

スクロールに合わせてヘッダーを表示、非表示したい際にとても便利なjQueryプラグインを発見したためご紹介します!!

jQueryプラグイン「Headroom.js」の役割とは?

jQueryプラグイン「Headroom.js」は、下にスクロールしたときにヘッダーを非表示にし、上にスクロールしたときにヘッダーを表示させます。


メニューの表示&非表示のイメージ

グーグルアドセンス_バナー広告_並列” width=


グーグルアドセンス_バナー広告_並列” width=

Facebookのスマホも同じ動きですね。

「Headroom.js」をダウンロードする

下記にHeadroom.jsのページのリンクを貼っておきますので、ヘッダーのGitHubのリンクからGitHubに行きダウンロードします。

公式サイトへ行くのが面倒な場合は、下記をクリックしますとダウンロードできます。

jQueryの読み込み方法

ダウンロードしたフォルダのdist内にある「headroom.min.js」「jQuery.headroom.min.js」を読み込ませます。
URLは自分の環境に合わせてください。

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

classの指定をする

該当のhtmlのタグにclassをしていします。

<header class="headroom">

jQueryの追加

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

やることはたったこれだけ。
それだけでFacebookのようなスクロールに合わせてヘッダーを表示・非表示させることが出来ます。

しかし、環境によってはスマホで動かないという事がおこります。
そんな時は下記のコードをcssに記載してください。

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

これでパソコンもスマホもしっかり動きます。

Facebookのようにスクロールに合わせてヘッダーを表示・非表示させてたいと思ったら、簡単に実装できるのでオススメですよ。

ほかにもオススメのプラグインを知りたい!という方がいらっしゃいましたら、お問い合わせフォームよりご連絡くださいませ。

( 前回の記事も見る

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です