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

実際の動きは下のサンプルでご確認ください。

メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。

<nav id="menu-wrap">
  <ul id="menu">
    <li><a href="#">menu1</a></li>
    <li><a href="#">menu2</a></li>
    <li><a href="#">menu3</a></li>
    <li><a href="#">menu4</a></li>
    <li><a href="#">menu5</a></li>
  </ul>
</nav>

続いてCSSです。

#menu-wrap {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,.5);
  transition: .3s;
}
#menu {
  list-style-type: none;
  width: 960px;
  margin: 0px auto;
  padding: 0;
}
#menu li {
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#menu li a {
  display: block;
  width : 100%;
  padding: 20px 0;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: .3s;
}
#menu li a:hover {  background: rgba(0,0,0,.3) }

こちらも普通です。メニューは固定していますので、position: fixed;を指定しています。で、topの値をスクロールの方向によって変えることで、「下にスクロールで消えて、上にスクロールで現れる」を作ります。

で、その仕組みはjQueryを作ります。

var menuHeight = $("#menu-wrap").height();
var startPos = 0;
$(window).scroll(function(){
  var currentPos = $(this).scrollTop();
  if (currentPos > startPos) {
    if($(window).scrollTop() >= 200) {
      $("#menu-wrap").css("top", "-" + menuHeight + "px");
    }
  } else {
    $("#menu-wrap").css("top", 0 + "px");
  }
  startPos = currentPos;
});

では、ここからは１行ずつ解説していきます。

さいごに

ということで、下にスクロールで消えて、上にスクロールで現れる固定メニューを紹介しました。

上に固定されているメニューはよく見かけますが、常に表示されているため大きすぎたりすると、煩わしいと感じる人もいるかもしれません。

そんな場合に使えるかもしれないですね。お役に立てばうれしいです。