The current article
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery
タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。
ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素（タグ）で固定したい場合に使ってみてはいかがでしょうか。
capture
今回ご紹介するのは、○○PXスクロールしたらという物ではなく、この要素の位置に来たら固定するというものです。
応用すれば、サイドバーなども固定出来ますので、使い勝手は良いと思います。
まず、CSSとjQuery本体を読み込ませ、スクリプトを記述します。
（今回はグローバルナビで説明）
HTML記述例（HEAD部）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <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部
1 2 3 4 5 6 7 8 9 10 11 12 13 | ・ ・<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部の記述です。スタイルシートに記述して下さい。
1 2 3 4 5 6 | .fixed { position: fixed; top: 0; width: 100%; z-index: 10000;} |
固定するためのCSSですのでお忘れなく。
以上で、スクロールした時、要素がトップの位置に来た時に固定されるようになりました。
必要に応じて、サイドバーなどで試してみてはいかがでしょうか。
←「外部リンクにtarget=”_blank”とclassを付与するjQueryで別窓アイコンを付ける」前の記事
次の記事「完全無料、登録必要なし！美顔加工に特化したオンライン写真加工フォトエディタ「BeautyPlus」」→
次の記事「完全無料、登録必要なし！美顔加工に特化したオンライン写真加工フォトエディタ「BeautyPlus」」→
関連記事
