【jQuery】上にスクロールした時に表示されるヘッダーの作り方

今回はjQueryで上にスクロールした時に表示されるヘッダーの作り方を解説します。

デモ
上にスクロールした時に表示されるヘッダーの作り方
まとめ

デモ

実際の動きはこんな感じです。下にスクロール時は非表示で、上にスクロールすると上からスッと表示されるのがわかるかと思います。

See the Pen
by wagashi000327 (@wagashi000327)
on CodePen.

上にスクロールした時に表示されるヘッダーの作り方

HTML

<body>
  <header>ヘッダーです</header>
  <main>
    <!-- メインコンテンツ -->
  </main>
</body>

HTMLは特に注意することはありません。そのまんまですね。

CSS

header {
  background-color: #ddd;
  height: 100px;
  width: 100%;
  transition: top 300ms;
}
header.is-fixed {
  position: fixed;
  z-index: 10;
}

ヘッダーは通常時は固定しないでおきます。

jQueryでスクロール量を取得し、スクロール量がヘッダーの高さを超えたら.is-fixedを入れて固定するようにします。またスッと出てくるようにtransitionも指定して起きましょう。

topの値はjQueryで操作することで上から出したり引っ込めたりします。

また、heightの値はjQueryで取得するのでCSSでは指定されていなくても構いません。

jQuery

$(function() {
  let pos = 0;
  $(window).on('scroll', function () {
    const $header = $('header');
    const $main = $('main');
    const headerHeight = $header.outerHeight();
    const currentPos = $(this).scrollTop(); // スクロール量

    // スクロール量がヘッダーの高さより大きい場合
    if (currentPos > headerHeight) {
      // headerを固定
      $header.addClass('is-fixed');
      $main.css('margin-top', headerHeight);
    } else {
      // それ以外は固定を解除
      $header.removeClass('is-fixed');
      $main.css('margin-top', 0);
    }

    // 上スクロール時
    if (currentPos < pos) {
      // header引っ込める
      $header.css('top', 0);
    } else {
      //下スクロール時はheader出す
      $header.css('top', -headerHeight);
    }
    pos = currentPos;
  });
});

若干コードが長いですが、少しずつ見ていけば大したことはしていません。

最初に処理で必要になる値を変数に入れておきます。

if (currentPos > headerHeight)ではスクロール量がヘッダーの高さを超えたらヘッダーに.is-fixedを入れ、メインコンテンツはmargin-top: headerHeightを入れてヘッダーの高さ分上部に余白を取ります。

こうしないと（ヘッダーを常に.is-fixedにしていると）メインコンテンツの上の部分とヘッダーがどうしても被ってしまいます。

スクロール量がヘッダーの高さを超えた時点でposition: fixed;は入りますが、下にスクロールしている時はtop: -headerHeightが入っているので画面外で固定されている感じになります。ヘッダーの高さより少ないスクロール量ならヘッダーは固定せずに普通に表示しておきます。

if (currentPos < pos)は上にスクロールしたかどうかを判定しています（上にスクロールしたならtrue）。

上にスクロールしたときはtop: 0でヘッダーを上からスッと表示します。逆に下にスクロールしたときはtop: -headerHeightでヘッダーの高さ分画面外に出して、その位置で固定しておきます。

最後のpos = currentPos;はスクロール量を更新しています。スクロールが発生するとcurrentPosは最新の値に書き換わりますが、posにはpos = currentPos;にあるように処理の最後の時点で最新だったスクロール量が入ります。

スクロールイベント発生時に最新のスクロール量と前回の処理の最後の時点で最新だったスクロール量を比較して最新のスクロール量のほうが小さい場合（＝上にスクロールした場合）にif (currentPos < pos)はtrueになるわけです。

jQuery側でヘッダーの高さを取得しておくとヘッダーの高さが固定pxじゃない場合でもうまく位置の調整ができます。

またscrollイベント時にヘッダーの高さを取得しているので、ヘッダーの高さがPCとSPで違う場合でもresizeイベントを挟まずに高さを取得できます。