スクロールすると特定の位置で固定されて更に スクロールすると固定が解除されるナビゲーションjQuery
- 投稿日：2015/10/18 ｜最終更新：2015/10/20
- JavaScript/jQuery
当サイトでも実装していますが、ページをスクロールすると特定のナビゲーションを画面の位置に固定し、一定の位置で固定を解除する動きをjQueryで実装します。
コンテンツ量の多い画面では、スクロールすると表示しておきたい要素が消えてしまうこともありますが、固定と固定解除を併用することで効果的な画面を構築できます。
共有リンクや広告要素などを固定表示することで、クリック数増加を補助することができます。
今回は、id="fix_nav"というdiv要素をfixedというクラスを使って固定します。
画面をスクロールした時にmenuというIDのdiv要素が画面上部に到達したタイミングでfixedというクラスをつけます。fixed_notというクラスで固定前のクラスを指定し、fixed_releaceというクラスで固定後のクラスを指定します。
headタグ内に下記スクリプトとソースを挿入してください。
jqueryサンプル
<script>
jQuery(function() {
//ページトップからの高さを取得
var fixnav_top = jQuery("div#fixnav").offset().top;
var fixnav_bottom = jQuery("div#fixnav").offset().bottom;
var fixnav_height = jQuery("div#fixnav").height();
//コンテンツの高さを取得
var content_height = jQuery("div#content").height();
var footer_top = jQuery("div#footer").offset().top;
// 読み込み時に開いたウィンドウの高さを取得
var window_height = jQuery(window).height();
// ウィンドウのサイズを変えたときの高さを取得
jQuery(window).resize(function(){
window_height = jQuery(this).height();
});
// スクロールされるごとに現在の位置を計算し、Classを付与・除去する。
jQuery(window).scroll(function(){
var scroll_height = jQuery(this).scrollTop();
if (scroll_height < fixnav_top) {
jQuery("div#fixnav").removeClass("fixed");
jQuery("div#fixnav").removeClass("fixed_releace");
jQuery("div#fixnav").addClass("fixed_not");
} else if (scroll_height > fixnav_top && scroll_height < footer_top - fixnav_height) {
jQuery("div#fixnav").removeClass("fixed_not");
jQuery("div#fixnav").removeClass("fixed_releace");
jQuery("div#fixnav").addClass("fixed");
} else {
jQuery("div#fixnav").removeClass("fixed");
jQuery("div#fixnav").removeClass("fixed_releace");
jQuery("div#fixnav").addClass("fixed_releace");
}
});
});
</script>
CSSサンプル
<style type="text/css">
#fixnav{height: 400px;}
.fixed_not{position: relative; top: 0;}
.fixed{position: fixed; top: 0;}
.fixed_releace{position: absolute; bottom: 420px;}
</style>
CSSで固定するdiv要素の高さを指定して下さい。
また、固定後のfixed_releaceクラスで固定を止める高さを指定してください。
今回は、固定するdiv要素の高さを400ピクセルとし、画面最下部から420ピクセルのところで固定を解除しています。
