• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly


この記事は 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 の記述を調整します。

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



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください