【jQuery】縦スクロールすると上からフワッと出てきて固定されるメニューヘッダ


スクロールするとある程度の高さまで来たときにヘッダを固定表示する方法

WordPressで作られたサイトやタテに長いランディングページなどでよく縦にスクロールしていくと途中でフワッと現れて画面上部に固定されるメニューヘッダってありますよね。
方法としてはjQueryのスライドアップ&ダウンやCSSのopacity操作を組み合わせたもの、さらにはCSSのみで設定・実現できるものなど、多くの選択肢があって多数のサイトで解説されています。

今回クライアント様から、Wordpressで構築されたサイトでスクロールしたときに上部に縮小されたロゴとメニューを表示したいーとご要望いただいたんですが、このロゴとかを配置して自由にレイアウトが組めるようなプラグインとかスニペットってなかなか見当たらなかったんですよね。

そこで下記のサイトを参考にさせていただきながら、jQueryで動き・CSSを制御しながら縮小表示したロゴとメニューを組み合わせたヘッダを表示する機能を組み込むことができました。感謝!!

jQuery animateでスクロールするとスライドして現れる「ヘッダーバー」を実装する方法

このような固定ヘッダの表示って他にも利用させていただくこと多いかもなので備忘録として。

表示デモと実装方法

まずは最終的な表示・動きのサンプルは以下のデモ画面みたいな感じ。

サンプル

1.jQuery本体の読み込みとヘッダ固定用のスクリプト

上記をまるっぽコピーして、「.fix-header」を適当なクラス名もしくはID名、「if ($(this).scrollTop() > 200) {」の数字部分をスクロール時に上から固定ヘッダを表示させるタイミング(下図参照)を指定してください。

2.HTMLソース

HTMLで特に気を付けることとかはありません。

通常はbodyタグの直下あたりに固定ヘッダ表示用のブロック(下記であればdiv class=”fix-header”)を作り、その下にロゴとメニューを表示するブロックを内包させます。

メニュー部分は後述のCSSで左寄せフロートで表示させます。

3.CSSでデザイン周りを調整

あとはCSSで表示デザインを調整。

ヘッダ全体の表示に関わる共通設定部分は8行目~27行目あたり。
ここはそれぞれの環境に合わせて幅やカラーを変更してください。
あとは個別の環境に応じてフロートやマージンの設定を調整してバランスを取ります。

ここではロゴ部分にメインと同じ画像を使って180px×180pxサイズの元画像を幅・高さ54pxに縮小してヘッダ左側に表示させるようにしています。(49~51行目あたり)

ま、個人的な備忘録ですが、上記のソースはご自由にコピペするなりしてお使いいただければ結構です。