この記事は2017年11月19日に書かれたもので、内容が古い可能性がありますのでご注意ください。
ページをある程度スクロールした後に別のページを見たくなる時があります。
そういうときにグローバルナビゲーションをページ頭に固定表示させていると次に行きたい場所へ誘導しやすくなります。
今回はスクロールしてナビゲーションが見えなくなったら固定ナビゲーションを表示させるパターンを書いていきます。
デモページを作成しましたのでこちらからご確認ください。
DEMO
HTML
<div id="header"> ヘッダー </div> <div id="nav"> ナビゲーション </div> <div class="box"> コンテンツ </div> <div class="box"> コンテンツ </div> <div class="box"> コンテンツ </div> <div class="box"> コンテンツ </div> <div id="footer"> フッター </div>
CSS
.clone-nav { position: fixed; top: 0; left: 0; z-index: 2; width: 100%; transition: .3s; transform: translateY(-100%); } .is-show { transform: translateY(0); }
Javascript
$(function() { var $win = $(window), $cloneNav = $('#nav').clone().addClass('clone-nav').appendTo('body'), showClass = 'is-show'; $win.on('load scroll', function() { var value = $(this).scrollTop(); if ( value > 300 ) { $cloneNav.addClass(showClass); } else { $cloneNav.removeClass(showClass); } }); });
#navのナビゲーションのクローンを作成してそのクローン(.clone-nav)を固定表示させるイメージです。
300の値を変更すれば上から降りてくるタイミングを調整することができます。
こちらのサイトを参考にして作成しました。
jQuery:スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 | NxWorld