グローバルナビをスクロール時に固定する方法

グローバルナビゲーションの仕様は、その時の流行によって左右されやすいものです。その中でも、安定してそのスタイルが良く扱われている「固定ナビゲーション」の指定方法をご紹介しておきます。今回はjQueryを使って、グローバルナビゲーションのデフォルトの位置を取得し、それ以上の値がスクロールされたら上部に固定するというものを作成していきます。

まずはサンプルを確認してみてください。

DEMO

スクロールをすると横に5つ並んだグローバルナビゲーションが上部に固定されるのが確認できると思います。

サンプルを見ながら確認していきましょう。

HTMLを記述

まずは、サンプルにも使っている横に5つのボタンを配置した場合のhtmlコードを記述します。

<div id="globalNavi">
	<ul>
		<li><a href="#">Menu1</a></li>
		<li><a href="#">Menu2</a></li>
		<li><a href="#">Menu3</a></li>
		<li><a href="#">Menu4</a></li>
		<li><a href="#">Menu5</a></li>
	</ul>
</div>

<ul>

</ul>

</div>

ナビを「div#globalNavi」で囲っています。

CSSを記述

「div#globalNavi」を横幅100%指定し、背景を#333にしています。
「div$globalNavi ul li 」aと「div$globalNavi ul li a:hover」にそれぞれ背景色やpadding設定などをしてボタンにしています。

#globalNavi{
	width: 100%;
	background:#333;
}
#globalNavi ul li a{
	background:#666;
	width: 20%;
	float: left;
	padding:20px 0;
	text-align: center;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #777;
	box-sizing: border-box;
}
#globalNavi ul li a:hover{
	background:#333;
}

#globalNavi{

width: 100%;

background:#333;

}

#globalNavi ul li a{

background:#666;

width: 20%;

float: left;

padding:20px 0;

text-align: center;

color: #fff;

text-decoration: none;

border-right: 1px solid #777;

box-sizing: border-box;

}

#globalNavi ul li a:hover{

background:#333;

}

CSSを追記

肝心な部分のCSSを追記します。「.fixed」に「position:fixed(固定)」、「top: 0（）トップからの位置は0px」、横幅100％、z-index: 10000（大きな数値を任意で指定）。

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

.fixed {

position: fixed;

top: 0;

width: 100%;

z-index: 10000;

}

jQueryの読み込みとJavaScriptを記述

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
	var nav = $('#globalNavi'),
	offset = nav.offset();
	$(window).scroll(function () {
	  if($(window).scrollTop() > offset.top) {
	    nav.addClass('fixed');
	  } else {
	    nav.removeClass('fixed');
	  }
	});
});
</script>

jQuery(function($) {

var nav = $('#globalNavi'),

offset = nav.offset();

$(window).scroll(function () {

if($(window).scrollTop() > offset.top) {

nav.addClass('fixed');

} else {

nav.removeClass('fixed');

}

});

</script>

変数「nav」を宣言し「#globalNavi」を代入、変数「offset」に変数「nav=#globalNavi」の位置を代入。「.scroll」した際に、scrollTop（スクロールした距離）と、はじめの「#globalNavi」のTopからの距離を比較して、スクロール値が大きければ、変数「nav=#globalNavi」に対して「.fixed（クラスfixed）」を追加し、値が小さければ、変数「nav=#globalNavi」から「.fixed（クラスfixed）」を削除するという文になります。

簡単な図で表すと、以下のようになります。

ちょっとややこしくなってしまいましたが、簡単に言うと「#globalNavi」の位置を確認して、固定するかどうかを判断しているということになります。

ついでに、今回使用したjQueryのイベントなどを覚えておくと良いでしょう。

offset()	ドキュメント上での表示されている位置(top,left)を戻り値として返します。
scroll(fn)	文書がスクロールした際にscrollイベントが呼び出されます。
addClass(class)	指定した要素に、CSSクラスを追加します。
removeClass(class)	指定した要素から、CSSクラスを削除します。

以上になります。