スクロールした方向によって、ヘッダーを表示・非表示する方法

固定ヘッダーのサイトでたまに見かける、上にスクロールした時はヘッダーを表示し、下にスクロールした時はヘッダーを非表示にするやり方を紹介します。

まずはCSSで通常の固定ヘッダーと、ヘッダーが隠れた時のクラスをそれぞれ作ります。

//style.css

//固定ヘッダー、トランジッションに関する記述
.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: translateY 600ms, opacity 200ms;
}

//ヘッダーにクラス「hide」が付いた時のスタイル。ブラウザの上方向にフレームアウトし透明になる
.header.hide{
  translateY: -100%;
  opacity: 0;
}

あとはjQueryでスクロールイベントを取得し、クラスのつけ外しをしてやります。

$(function(){
  const header = $('#header');
  //ヘッダーを変数「header」に格納

  $(window).on('scroll', function(){
  //画面をスクロールした時に〜。スクロールイベントを取得

    const scroll = $(window).scrollTop();
   //スクロール量を変数「scroll」に格納

    let pastPos = 0;
    //今までのスクロール量。初期値は0

    const start = 300;
　　　　　　　　//クラスの付け外しが行われるポイント。一番上から300スクロールしたら、実行される
    
    if(scroll >= pastPos && scroll >= start){ 
    もし('スクロール量が現在の位置を上回ったら' 尚且つ 'スクロール量が300を超えていたら')

      header.addClass('hide');
　　　　　　　　　　　　//ヘッダーに「hide」というクラスを付与する

    } else {
　　　　　　　　//()内の条件に当てはまらなければ

      header.removeClass('hide');
      //ヘッダーの「hide」というクラスを削除する
    }

    pastPos = scroll;
    //今までのスクロール量に現在のスクロール量を代入する。
  });

});

基本的には、スクロールする度に「今現在のスクロール値」と「さっきまでのスクロール値」を比較し、現在の方が多ければヘッダーを隠すというプログラムになります。

その後、さっきまでのスクロール位置を 現在のスクロール量で上書きします。

例えば、最初のスクロール量は「現在」も0、「過去」も0になります。
ここで800スクロールすると「現在」が800、「過去」が0になりますので、if文の中の条件式が成立することになります。(800 >= 0)

ヘッダーにクラスを付与したあとで、0になっていた「過去」の値を800に上書きします。
その後に500まで上にスクロールしたとすると、(500>=800)で条件式が成立しないので、ヘッダーのクラスを削除することになります。

その後、「過去」の値を500に上書きします。

以上が、下スクロール時にヘッダーが隠れる仕組みですが、もうひとつ。
変数「start」に300という数字を代入しています。これは300以上スクロールしないとこのプログラムが発動しないようにする為にいれています。
if文の条件式の「&&」の部分は「右辺と左辺、両方の式が成立したらture」という意味になります。

今回のプログラムでいうと、
スクロールした時に「さっきまでのスクロール量を超えたら」と「スクロール量が300を超えたら」という2つの条件を満たした時のみヘッダーにクラスが付与されます。

場合によっては、「スクロール量が、メインビジュアルの下端部を超えたら」という条件式をつけたりできそうですね。

以上、「下スクロールでヘッダーを隠し、上スクロールでヘッダーを出現」させる方法になります。
最後まで読んでいただきありがとうございました。