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

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

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

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

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

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

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

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

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

メニューの用意と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;
}

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

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>

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

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

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

<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初心者（自分も含めて）にはイベントハンドラの良い勉強になるのではないでしょうか。