【jQuery】スクロールすると下からアニメーションして表示されるナビゲーションメニューの実装

アニメーションのサンプルは以下を参照してください。

See the Pen scroll-navigation-show by RECOOORD (@recooord) on CodePen.

上記のサンプルを下にスクロールしてみてください。下からメニューがニョキっと表示されると思います。
今回はこのような実装ができるように紹介していきます。

HTMLの記述

<section>Scroll Down↓</section>
<ul class="menu">
  <li><a href="">メニュー</a></li>
  <li><a href="">メニュー</a></li>
  <li><a href="">メニュー</a></li>
  <li><a href="">メニュー</a></li>
</ul>

ulタグでメニューを作成します。
クラス名に「menu」と付けておきます。

CSSの記述

section{
  height: 1000px;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  padding: 100px 50px;
}
.menu{
  position: fixed;
  display: flex;
  left: 0;
  bottom: 0;
  width: 100%;
  /* 1. メニューを画面下へ隠す */
  transform: translateY(100%);
  /* 2. 0.3秒かけて表示する */
  transition: .3s;
}
.menu li{
  width: 25%;
}
.menu li a{
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: #000;
  text-align: center;
  text-decoration: none;
  padding: 30px;
  border: 1px solid #ccc;
}
.active{
  /* 3. メニューを定位置へ戻す */
  transform: translate(0);
}

上記のようにCSSで装飾をしていきます。
アニメーションのために指定している重要なプロパティだけ解説します。

1. メニューを画面下へ隠す

transform: translateY(100%) を指定することで、メニューの高さ分、下に要素が移動します。画面の外に移動するので、メニューは見えなくなります。

2. 0.3秒かけて表示する

これは0.3秒かけてアニメーションするためのプロパティです。

3. メニューを定位置へ戻す

クラス名「active」に、transform: translate(0) を指定します。
これは隠したメニューを定位置に戻すためのプロパティとなります。

jQueryの記述

$(function() {
    var menu = $('.menu');    
    //スクロールしてページトップから100に達したらクラスを付与する
    $(window).on('load scroll',function () {
        if ($(this).scrollTop() > 100) {
            menu.addClass('active');
        } else {
            menu.removeClass('active');
        }
    });
});

ページの先頭から100pxスクロールしたら「menu」クラスに「active」クラスを追加する、という指定をしています。
クラス名が付与されることで、CSSで指定したプロパティ「transform: translate(0)」が発動し、メニューがアニメーションされて表示される仕組みとなっております。

上記のコードは全てコピペで実装することができますので、よかったら参考にしてみてください。