jqueryでスクロール時にポップアップするメニューを設置する方法

Pocket

スクロールについてくるトップメニューを導入

記事を見て興味を持った方が同じカテゴリの記事を参照する際のユーザビリティの向上と導線強化のため、スクロールに追従するトップメニューを導入しました。

今回は参考にしたサイトのコードほぼそのまんまなので、簡単に解説を加える程度で進めていきます。

参考サイト

Webpark:jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー

ここで紹介するメニューの前提

当サイトのメニュー作成にあたってヘッダー部に固定されたメニューと、任意のスクロールポイントで出現するメニューの２つを用意しました。

よく見かけるのは下にスクロールすると消えるものですが、あまり頻繁に動きすぎると閲覧していて気が散ると思ったので任意のスクロールポイントだけの制御にしてあります。

また、メニューを２つ用意することでメンテナンス性も悪くなりコードも冗長になりますが、自分のイメージした動きにするにはこの方法しか思い浮かばなかったのもありますが、スクロール時は別の情報メニューを用意できるメリットがあります。
例えばある記事を閲覧した時、その記事のカテゴリとタグを表示したり、アーカイブならカテゴリの階層メニューを表示したりなど。

という訳で今回紹介するメニューは「通常は消えていて任意のスクロールポイントで出現を制御するメニュー」になります。

メニューの用意とCSS記述

CSS

.popup_nav{
	height: 40px;
	box-shadow: 0 1px 5px rgba(0,0,0,0.2);
	position: fixed;
	z-index: 9999;
	opacity: 0.95;
	top:-45px;
	left:0;
	transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
}

.popup_nav{

height: 40px;

box-shadow: 0 1px 5px rgba(0,0,0,0.2);

position: fixed;

z-index: 9999;

opacity: 0.95;

top:-45px;

left:0;

transition: all 0.5s linear;

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

}

特に難しいことはないですが一応ポイントを書いておきます。

・position:fixedで位置の固定
・index:9999で最前面に表示
・top:-45pxで高さ＋box-shadow分上に隠しておく
・transitionでアニメーション処理

HTML

<div class="popup_nav">
<!-- メニュー内容 -->
</div>

</div>

htmlはクラス指定だけでOKです。

jquery設置

<script>
var menuHeight = $(".popup_nav").height();
$(window).scroll(function(){
  if ($(window).scrollTop() >500){
  	$(".popup_nav").css("top", 0 + "px");
  } else {
  	$(".popup_nav").css("top", "-" + menuHeight + 5 + "px");
  }
});
</script>

var menuHeight = $(".popup_nav").height();

$(window).scroll(function(){

if ($(window).scrollTop() >500){

$(".popup_nav").css("top", 0 + "px");

} else {

$(".popup_nav").css("top", "-" + menuHeight + 5 + "px");

}

});

</script>

作業フローは下記のとおり。

1行目：・menuHightにメニューの高さを代入
2行目：スクロールイベントが発生したら処理開始
3-4行目：500px以上スクロールされたらtop:0にしてメニュー表示
4-5行目：そうでなければtopにメニューの高さ（+box-shadowの5px）上げて隠す

制御が任意のスクロールポイントだけなので非常にシンプルです。
例では汎用性を考慮してあってメニューの高さを代入していますが、そのまま数値を入れてももちろん動きます。

ちなみに参考にしたサイトでもあるようにスクロールの向きを判別して出し入れしたい場合は処理が煩雑になります。

上にスクロールすると出現して、下にスクロールすると消えるメニュー

<script>
var menuHeight = $(".popup_nav").height();
var startPos = 0;
$(window).scroll(function(){
  var currentPos = $(this).scrollTop();
  if ($(window).scrollTop() >500){
  	$(".popup_nav").css("top", 0 + "px");
  	if (currentPos > startPos) {
    	if($(window).scrollTop() >= 500 ) {
      	$(".popup_nav").css("top", "-" + menuHeight + 5 + "px");
    	}
  	} else {
    	$(".popup_nav").css("top", 0 + "px");
  	}
  	startPos = currentPos;
  } else {
  	$(".popup_nav").css("top", "-" + menuHeight + 5 + "px");
  }
});
</script>

var menuHeight = $(".popup_nav").height();

var startPos = 0;

$(window).scroll(function(){

var currentPos = $(this).scrollTop();

if ($(window).scrollTop() >500){

$(".popup_nav").css("top", 0 + "px");

if (currentPos > startPos) {

if($(window).scrollTop() >= 500 ) {

$(".popup_nav").css("top", "-" + menuHeight + 5 + "px");

}

} else {

$(".popup_nav").css("top", 0 + "px");

}

startPos = currentPos;

} else {

$(".popup_nav").css("top", "-" + menuHeight + 5 + "px");

}

});

</script>

まとめ

動きが楽しい「トップへ戻る」ボタンも設置していますが、直接メニューへアクセスできる追従型メニューのほうが利便性は高いんじゃないかと思います。
ただかさばるメニューだとスペースを圧迫してしまうので、トップの固定メニューは大きく見やすいもの、追従型メニューは簡易的なもの、という使い分けが本来の用途かなーと思います。まだそこまで作っていませんけどね。

あとはこれくらいのシンプルなコードならjquery初心者（自分も含めて）にはイベントハンドラの良い勉強になるのではないでしょうか。