[JS]jQueryでページスクロールしてもナビゲーションを固定させる方法｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

スポンサード

この記事は OZPAの表4 様の記事を参考にさせていただきました。

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

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

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>

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

CSS のサンプル

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

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

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

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

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

スポンサード