The current article
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery
タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。
ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素（タグ）で固定したい場合に使ってみてはいかがでしょうか。
capture
今回ご紹介するのは、○○PXスクロールしたらという物ではなく、この要素の位置に来たら固定するというものです。
応用すれば、サイドバーなども固定出来ますので、使い勝手は良いと思います。
まず、CSSとjQuery本体を読み込ませ、スクリプトを記述します。
（今回はグローバルナビで説明）
HTML記述例（HEAD部）
<html>
<head>
・
・
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
var nav = $('#fixedBox'),
offset = nav.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});
});
</script>
・
・
</head>
<body>
・
・
簡単な説明です。
10行目、fixedBoxというIDがある要素が
14行目、トップの位置に来た時
15行目、fixedというクラスを付与
17行目、トップの位置でなくなればfixedというクラスを削除
となります。
10行目は、お好きなIDに変更可能ですが、その場合は下記のID名も同じにして下さい。
続いてBODY部
・
・
<div id="fixedBox" class="nav">
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</div>
・
・
ナビの作り方については割愛させていただきます。
3行目のように、固定したい要素に「id=”fixedBox”」を付けて下さい。
すでに作成しておられる方は、既存の要素部分に「id=”fixedBox”」を記述してあげて下さい。
そしてもう一点、CSS部の記述です。スタイルシートに記述して下さい。
.fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
固定するためのCSSですのでお忘れなく。
以上で、スクロールした時、要素がトップの位置に来た時に固定されるようになりました。
必要に応じて、サイドバーなどで試してみてはいかがでしょうか。
←「外部リンクにtarget=”_blank”とclassを付与するjQueryで別窓アイコンを付ける」前の記事
次の記事「完全無料、登録必要なし！美顔加工に特化したオンライン写真加工フォトエディタ「BeautyPlus」」→
次の記事「完全無料、登録必要なし！美顔加工に特化したオンライン写真加工フォトエディタ「BeautyPlus」」→
関連記事
