【JavaScript】上にスクロールするとにゅっと出てくるメニューを作る

Tweet

Category css, JavaScript 2017/12/27

問題

長い画面で、メニューや検索フォームなどが、近くにいて欲しいんだけど、いつも見えると邪魔。
下へ下へスクロールしてみているときは隠れていて、
上にスクロールすると出てくるメニューを作りたい。

答え

stickyな動きは、CSSで可能。

普段はスクロールとともに上に隠れて行って欲しいので、必要なだけtopを引いておきたいのだが、
JavaScriptで測って、JavaScriptでtopのマイナスを入れるので、今回は書かなくてOK。

「にゅっ」っとした感じを出したいので、CSSのtransitionを設定しておく。

.sticky-menu {
  position:sticky;
  top:0;
  transition:.5s;
}

上にスクロールしたことを検出して、topを0に戻したり、
下にスクロールしたことを検出して、topを必要なだけ引いたりする処理は、こんな感じ。

$(function(){
  var $sticky = $('.sticky-menu');
  //position:sticky が使えるときだけ使う
  if ($sticky.css('position') == 'sticky') {
    var lp = 0;
    $(window).on('scroll', function(){
      var cp = $(this).scrollTop();
      if (lp < cp) {
        //下へ → 上に引っ込むアニメーション
        $sticky.css('top', height);
      } else if (lp > cp) {
        //上へ → 下に出てくるアニメーション
        $sticky.css('top', 0);
      }
      lp = cp;
    });
  }
});

HTMLはシンプルに、classを付与しておくだけ

<div class="sticky-menu">menu1 | menu2 | menu3 | menu4 | menu5</div>

デモ

以上を組み合わせるとこうなる。

→ デモはこちら