当サイトではグローバルナビゲーションを上部に固定表示させるスティッキーヘッダーを実装しています。
スティッキーヘッダーを設定すると、縦に長いページでもナビゲーションが隠れてページ移動が不便になることはありません。特にスマートフォンサイトでは有効です。
スティッキーヘッダーはjQueryでスクロールの量に応じて、HTMLのclass属性を操作することで実現させます。
class属性を操作するHTMLの確認
ナビゲーション部分のコードは以下のようになっています。このコードのnav要素をスクロールしても上部に固定表示させます。
1 2 3 4 5 | <nav class="navbar navbar-default" role="navigation"> <div class="container"><!-- 省略 --> </div></nav> |
スティッキーヘッダーを実装するjQueryのコード
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | $(document).ready(function () { $('.navbar').each(function () { var $window = $(window), $header = $(this), headerOffsetTop = $header.offset().top; $window.on('scroll', function () { if ($window.scrollTop() > headerOffsetTop) { $header.addClass('sticky'); } else { $header.removeClass('sticky'); } }); $window.trigger('scroll'); });}); |
jQueryのコードの解説
1 2 3 4 | $(document).ready(function () { $('.navbar').each(function () {<!-- 省略 -->}); |
この部分はhtmlの中から.navbarを探して、その要素に対して以降の処理を実行します。
1 2 3 4 5 6 7 | $(document).ready(function () { $('.navbar').each(function () { var $window = $(window), $header = $(this), headerOffsetTop = $header.offset().top;<!-- 省略 -->}); |
この部分は必要となる要素を変数に格納しています。
3行目はJavaScriptのWindowオブジェクトをjQueryオブジェクト化しています。4行目は変数$headerに.navbar(thisは.navbar)のjQueryオブジェクトを入れています。5行目はoffset()メソッドでjQuery要素のドキュメント上の位置を取得しています。offset()メソッドはtop(ドキュメント上端からの距離)とleft(ドキュメント左端からの距離)という2つのプロパティを持っています。今回はtopを指定して変数headerOffsetTopにドキュメントの上端の距離を入れています。
1 2 3 4 5 | $window.on('scroll', function () { if ($window.scrollTop() > headerOffsetTop) { $header.addClass('sticky');<!-- 省略 --> }); |
この部分はスクロールイベントが発生した時に以降の処理を実行します。
1 2 3 4 5 6 7 | $window.on('scroll', function () { if ($window.scrollTop() > headerOffsetTop) { $header.addClass('sticky'); } else { $header.removeClass('sticky');<!-- 省略 -->}); |
2行目はウィンドウがナビゲーションの初期状態の位置よりも下へスクロールされたらという条件式です。scrollTop()メソッドは要素が縦方向にどれだけスクロールされたかを調べることができます。
2行目の条件式を満たせば、3行目で.stickyクラスを追加します。4行目、5行目は満たさなければ逆に.stickyクラスを削除します。
1 2 3 4 5 | $(document).ready(function () {<!-- 省略 --> $window.trigger('scroll'); });}); |
この部分はスクロールした状態でブラウザをリロードした時などに、スクロールイベントの発生を.triggerメソッドでブラウザに伝えています。
最後にjQueryで追加した.stickyクラスにCSSを設定します。
1 2 3 4 5 6 7 | .sticky { position: fixed; top: 0; z-index: 100; width: 100%; border-bottom: 2px solid #333;} |
.stickyのCSSは高さやカラーなども調整するとサイトによっては見やすくなると思います。
