jQuery で一定以上スクロールしたらついてくるナビゲーションを実装する
jQueryでスクロールするとついてくるようになるナビゲーションを実装する
サイトのナビゲーションがヘッダーの下とかにある場合に、ある程度スクロールすると途中からついてくるようにするナビゲーションを実装する方法。ナビゲーションがウィンドウの上部に達したらそこからは、画面上部に張り付いてつくてくるようなやつです。
あれを、今回はプラグインを使わずにjQueryだけで実装します。
まず jQuery で、ナビゲーションのある位置を取得します。ナビゲーションのある位置は、offset().top で取得することが出来ます。そのナビゲーションの初期の位置と、現在のウィンドウのスクロールされた位置を照らしあわせて、ウィンドウがスクロールされた位置がナビゲーションの位置よりも進んでいる場合は。ナビゲーションのpositionを position: fixed; にしてやることで、画面上に常に表示させるようにします。このことによって、あたかもナビゲーションがスクロールした時についてきたかのように見えます。
ーCODEー
必要なところだけを抜き出しています。jQueryとかはheadで読み込んでおいてください。
HTML
<body>
<header></header>
<div class="nav">
<div class="nav-in">
<p>NAVIGATION</p>
</div>
</div>
<div class="content"></div>
<footer></footer>
</body>
HTMLは一般的な特に変わったものではありません。ナビゲーションの部分を入れ子にしているのは、positionで移動した時に、もともとあったところの高さが失われてしまってレイアウトが崩れてしまうのを防ぐためです。
CSS
.nav {
width: 100%;
height: 100px;
}
.nav-in {
width: 100%;
height: 100px;
position: inherit;
top: 0;
left: 0;
background: #fff;
}
CSSでは、ナビゲーションの幅を100%としておくことで、positionで親要素から離れた時も横幅をキープしておくようにしてあります。positionでfixedが当てられた時のために、起点となる場所を top と left で指定してあります。
javascript （jQuery）
var nav_offset = $('.nav-in').offset().top;
$(window).on('scroll load',function(){
var now_offset = $(window).scrollTop();
if ( now_offset >= nav_offset ) {
$('.nav-in').css('position','fixed');
} else {
$('.nav-in').css('position','inherit');
}
$('p').text('NAV SCROLLTOP '+now_offset); //デモ表示用
});
まず、一番最初にナビゲーションの現在の位置、要素の一番上の辺の位置を取得します。
次にウィンドウがスクロールされた場合と読み込まれた場合に実行する内容を書いています、スクロールされるたびに、現在のスクロール位置を $(window).scrollTop(); で取得して now_offset に格納しています。この値をつかって、スクロールされる度に ナビゲーションの一番上の辺の値と比較して、スクロールされた量が多い時に、ナビゲーションの要素に position fixed をつけます。それ以外の時は inherit でデフォルトに戻します。
一定量スクロールされてからついてくるナビゲーションを作るのは以外と、短いjQueryコードで作ることが出来ます。セレクタのところの指定を変えるだけで汎用的に使えます。全体的なコードはデモを新しいタブで開いてソースを覗いてください。
COMMENT