[JS]jQueryでページスクロールしてもナビゲーションを固定させる方法

Javascript・jQuery

2013.04.27

ページを下までスクロールしてもサイドメニューに広告が固定されたまま、なんてブログをよく目にしますが、このような動きはjQueryを利用することで実装可能です。

バナー広告以外にもメニューボタンやSNSボタン、ページの先頭へ戻るなどのリンクを設置できるなど、色々と応用しやすいカスタマイズです。

Javascript のサンプル
CSS のサンプル

Javascript のサンプル

jqueryファイルと一緒に<head>内に以下のjavascriptのコードを記述します。

<script src="./jquery.min.js"></script>
<script>
	$(function($) {
		var tab = $('.nav'),
		offset = tab.offset();

	$(window).scroll(function () {
		if($(window).scrollTop() > offset.top) {
			tab.addClass('fixed');
		} else {
			tab.removeClass('fixed');
		}
	});
});
</script>

$(function($) {

var tab = $('.nav'),

offset = tab.offset();

$(window).scroll(function () {

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

tab.addClass('fixed');

} else {

tab.removeClass('fixed');

}

});

</script>

.nav要素がスクロールによってページの先頭に来た時点で、fixedのクラスを付与します。それ以外の時にはfixedのクラスは外しておく、という処理になります。

CSS のサンプル

固定させたい要素に対してposition:fixedを指定します。

.nav.fixed	{
	position:fixed;
	top:10px;
}

.nav.fixed {

position:fixed;

top:10px;

}

top:10pxの値ですが、ページの上部からどの位置に要素を固定させるか？を指定します。
また、right:やleft:など、要素の配置場所によってCSS の記述を調整します。

以下に、スクロールにより要素を固定させるサンプルを用意しました。

スクロールによる要素の固定のデモ

参考ページ
[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する