スクロールしてもページ上部にメニューを固定するjQuery

更新日：2016年2月7日

1ページ毎のボリュームがあまりないサイトでは必要性を感じませんが、ボリュームがあるサイトではどうしてもページが縦に長くなってしまいますよね。
下の方までスクロールした状態で、上部のグローバルナビから他のページへ移動したい際にまた上にスクロールし直すのは大変面倒です。

だったら、スクロールした場合にページ上部にメニューを固定しちゃえばいいんです。固定しっぱなしではなく、上にスクロールし直した場合にはちゃんと通常のメニューに戻る必要もありますね。

それではどのように実装するかというと、まずCSSで

.fixed {
	position: fixed;
	top: 0;
	z-index: 9999;
}

と記述します。
このCSSは後述するjQueryの記述の際に使用するもので、メニューをページ上部に固定するCSSです。

そしてjQueryには

$(function(){
	var menu_f = $("#nav");
	var menu_f_top = menu_f.offset().top;
	$(window).scroll(function () {
		if($(window).scrollTop() >= menu_f_top) {
			menu_f.addClass("fixed");
			$("body").css("margin-top","50px");
		} else {
			menu_f.removeClass("fixed");
			$("body").css("margin-top","0");
		}
	});
});

と記述します。

var menu_f = $("#nav");の #nav の部分には固定したいメニューを囲んだ要素を選択してあげて下さい。
また、$("body").css("margin-top","50px");の 50px の部分は固定したいメニューの高さを指定してあげて下さい。当サイトの場合は50pxなので、仮に50pxとしています。

上記のソースはメニューより下までスクロールされた際に、メニューに.fixedを付与し、固定します。そして上にスクロールし直した場合にはメニューから.fixedを削除して、元に戻しているのです。

実装しているサイトも多いですし、近頃人気がある手法です。
何よりユーザビリティ向上にも繋がりますので、是非お試し下さい。