ナビゲーションバーをTOPに固定させる方法

スクロール固定化例

どうも、アツシです。

今回はナビゲーションバーをスクロールしてもTOPに固定化させる方法についてご紹介します。自分が再度設定するためにも備忘としても残します。
この方法を用いれば好きなオブジェクトでも同様に固定化させることができます。

概要

ではどうやってスクロールしてもTOPに固定化させるのか、その方法を簡単に説明します。

まず、ウィンドウ内でスクロールされるとjavascript側では最初のウィンドウの高さからどこまでスクロールしたのかを認識することができます。(ここではスクロール値とします。)

そのため、スクロール値が一定の値になった時、つまりスクロール値がナビゲーションバーの高さを超えた時にナビゲーションバーを固定化させてしまえばいいのです。

また、逆にスクロール値がナビゲーションバーの高さよりも低くなった場合にはナビゲーションバーを元の状態に戻します。

以上の処理をクラスを使って実現させます。

変更が必要なファイル群

固定化させるために変更させるファイル2つあります。

まず一つ目はjavascriptのファイルです。(javascript.jsとかに相当します。)

これはスクロールした際に固定化させるためのクラスを付与/解除を切り替えさせるために必要となります。

次にスタイルシートのファイルです。(style.cssとかに相当します。)

これは先ほど、javascript側でスクロール後に出現させるクラスに対応した、スタイルシートを設定させるために必要となります。

ではそれぞれのファイルの変更を記します。

javascript側の修正

javascript側のファイル(ここではjavascript.jsとします。)を修正します。

まずナビゲーションバーの高さを用意します。

(id名称を”navi”としています。)

var nav = $('#navi'),   // ナビゲーションバー
 offset = nav.offset();   // ナビゲーションバーの高さ(これを使います。)

次にスクロールの判定ですが、以下の記述で可能となります。

$(window).scroll(function () {
// この中に記述
}

この括弧内{}ではスクロールの判定が行えるため、先ほど取得したナビゲーションバーの高さ(offset)を使ってクラスを設定/解除します。

if($(window).scrollTop() > offset.top) {
 nav.addClass('navifixed');
}

if文ではウィンドウのスクロール値がナビゲーションバーの高さをより高い場合を示しています。

そして上記条件内でナビゲーションバー本体に新しいクラス(ここでは’navifixed’とします。)を付与します。

else {
 nav.removeClass('navifixed');
 navdev.removeClass('mobilefixed');
 }

次に先ほどのif文の条件以外(ウィンドウのスクロール値がナビゲーションバーの高さよりも同じか低い場合)では先ほど作成したクラス(‘navifixed’)を解除します。

以上でjavascript側の修正は完了です。

スタイルシート側の修正

スタイルシート側の修正は1つのみです。

javascript側で新たに用意したクラス(ここでは’navifixed’)に対して、CSSを記述します。

.navifixed{
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 5000;
}

positionは固定化させたいので’fixed’にし、topで配置したい箇所に設定します。

widthはナビゲーションバーをウィンドウサイズいっぱいで必要のため設定しました。(環境によっては不要です。)

z-indexはどのオブジェクトよりも前面に出しておきたいため、かなり大きい値で設定しています。(大きければどの値でもOK。)

手っ取り早いソース

以上の処理をまとめると、それぞれ以下になります。

javascript側(javascript.jsに追記)

jQuery(function($) {
var nav = $('#navi'), // ナビゲーションバー本体
 offset = nav.offset(); // ナビゲーションバーの高さ
$(window).scroll(function () {
 if($(window).scrollTop() > offset.top) { // ウィンドウのスクロール値がナビゲーションバーよりも高い場合
 nav.addClass('navifixed');  // クラスを付与
 } else {
 nav.removeClass('navifixed');  // クラスを解除
 }
});

スタイルシート側(style.cssに追記)

.navifixed{
 position: fixed;  // 位置を固定
 top: 0;    // ウィンドウの頭に位置
 width: 100%;  // 長さを設定(環境によっては不要)
 z-index: 2000;  // 前面に設定
}

まとめ

今回はナビゲーションバーをスクロールしてもTOPに固定化させる方法をご紹介しました。

今回はナビゲーションバーで用意しましたが、サイドバーやその他のオブジェクトでも応用すれば固定化させることが可能となります。

スクロールしてナビゲーションバーが消えてしまうと、ユーザビリティ的にもよくありません。いずれかの方法でナビゲーションは残しておけるのがよいかと思います。

そこまで難しい記述もなく、簡単に設定できるのでぜひ対応して頂きたいと思います。

シェアする

フォローする

アツシ