画面上をスクロールした際に、メインとなるナビゲーションを常に画面の一番上に表示される形をとりたい時の簡単な方法をご紹介します。常に他のページへのリンクが可能になるので便利ですが、あまり高さを取りすぎてしまうとコンテンツ部分が見える範囲が必然的に狭くなってしまうので、可視エリアを配慮しながら利用したほうがいいかもしれません。
まずは、サンプルをご確認ください。
※スクロールすると画面の上部にメニューが固定表示されるかと思います。
それでは見ていきましょう。
1.HTMLを記述
サンプルとして、liタグで横幅25%に指定しfloatさせることで4つのメニューを配置。
1 2 3 4 5 6 7 8 |
<nav id="fixed-navi"> <ul> <li><a href="#">NAVI1</a></li> <li><a href="#">NAVI2</a></li> <li><a href="#">NAVI3</a></li> <li><a href="#">NAVI4</a></li> </ul> </nav> |
2.CSSを記述
最後の.fixedというクラス名で固定する指示。
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 29 30 31 32 33 34 35 36 37 |
#fixed-navi{ background:#666; width:100%; } ul{ overflow:hidden; list-style:none; } li{ float:left; width:25%; box-sizing: border-box; border-right:1px solid #333; text-align: center; } li:last-child { border-right:none; } li:first-child { border-left:none; } li a{ color:#fff; text-decoration:none; padding:15px 20px; display:block; } li a:hover{ color:#333; background:#555; } /*--// .addClass();で追加するcss //--*/ .fixed { position: fixed; } |
3.jQuery本体とJavaScriptを読み込む
JavaScriptの詳細は後述しますが、以下のようなJavaScriptを読み込んでください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { var nav = $('#fixed-navi'); var navTop = nav.offset().top; $(window).scroll(function () { var winTop = $(this).scrollTop(); if (winTop >= navTop) { nav.addClass('fixed').css('top',0); } else if (winTop < navTop) { nav.removeClass('fixed').css('top',-navTop+'px'); } }); }); </script> |
これでOKです。
ここからは、余談になりますが折角なので、先ほど読み込んだJavaScriptをちょっと突っ込んで見てみましょう。
Script部分は以下のようなコードになっていて、アンダーラインを引いてある部分にjQueryの「イベント関数」というものが書いてあります。
jQuery及びJavaScriptに詳しい方であれば簡単なコードだと思いますが、正直よくわかっていないよって方でも少し理解出来るように見ていきたいと思います。
先に「.offset()」イベントを確認
.offset()
指定した要素のドキュメント上での表示している位置の値を返します。
戻り値は「top」と「left」の2つの数値を持ち、可視状態にある(見える状態にある)要素に対してのみ有効です。
先ほどのScriptを上から順に見ていくと、変数「nav」に「#fixed-navi」を代入して、もうひとつの変数「navTop」に変数「nav」=「#fixed-navi」の位置(画面上部から要素までの距離)を代入しています。
- $nav = #fixed-navi
- $navTop = #fixed-naviの画面上部からの距離
その後に「.scroll()」イベントが出てきます。
.scroll()
scrollイベントは、文書がスクロールした際に呼び出されます。
$(window).scroll(function(){…})で、ウィンドウがスクロールされたら{…}を実行するという意味になります。
.scrollTop
最初の要素の現在のスクロール上の上位置を取得します。
変数「winTop」に「this(ここでいうthisはウィンドウのこと)」のスクロール値を代入してここから「if文」に突入しています。
if (winTop >= navTop){A…}else if(winTop < navTop){B…}
もし「winTop」の値が「navTop」の値以上であれば{A…}を実行する。そうでなくてもし「winTop」の値が「navTop」の値未満であれば{B…}を実行するということになります。
そして、{A…}と{B…}の内容ですが、
まずは{A…}は、
nav.addClass(‘fixed’).css(‘top’,0);
という一文ですが、変数「nav」に対してクラス名「.fixed(‘top’,0)」を”add=追加”しています。
.addClass()
指定した要素に、CSSクラスを追加します。
そして、{B…}は、
nav.removeClass(‘fixed’).css(‘top’,-navTop+’px’);
{A…}とは逆に、変数「nav」に対してクラス名「.fixed(‘top’,-navTop+’px’)」を”remove=削除”しています。
.removeClass()
指定した要素から、CSSクラスを削除します。
そして、サンプルで言うところの、変数「navTop」は“75px”になっているので、この「navTop」の値と「winTop」の値(スクロール値)を比較して、それぞれ実行する内容を変化させています。
わかったようなわからないような・・・
説明があまり上手くないので伝わりづらかったら申し訳ありません・・・。意味不明だと感じたらスルーしてください(悲)。。。
以上になります。