下にスクロールすると消えて、上にスクロールすると表示される固定ヘッダーをjQueryを使わずに実装する方法

下にスクロールすると消えて、上にスクロールすると現れる固定ヘッダーを実装する方法をご紹介いたします。jQueryは使わずに素のJavaScriptで実装する方法です。

挙動については、以下デモページをご参照ください。

デモページを見る

下にスクロールすると消えて、上にスクロールすると表示される固定ヘッダーをjQueryを使わずに実装する方法

この方法はFirstLayoutさんで紹介されていたやり方です。大変参考になりました。

下にスクロールすると消えて、上にスクロールすると表示される固定ヘッダーを実装するには、以下のようなJavaScriptを記述します。記述箇所は、</body>の直前でOKです。

( function() {
  const target     = document.getElementById( 'header' ),
        height     = 64;
  let offset       = 0,
      lastPosition = 0,
      ticking      = false;
  
  function onScroll() {
    if( lastPosition > height ) {
      if( lastPosition > offset ) {
        target.classList.add( 'head-animation' );
      } else {
        target.classList.remove( 'head-animation' );
      }
      offset = lastPosition;
    }
  }
  
  window.addEventListener( 'scroll', function(e) {
    lastPosition = window.scrollY;
    
    if( !ticking ) {
      window.requestAnimationFrame( function() {
        onScroll( lastPosition );
        ticking = false;
      });
      ticking = true;
    }
  });
})();

「height = 64;」のところで、どれくらいスクロールされたらヘッダーを非表示にするかを定義します。この部分は任意で変更しましょう。その他、詳しい解説はFirstLayoutさんの記事をご参照ください。

CSSでは以下のように記述しましょう。

/* 固定ヘッダー */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
  z-index: 999;
}

/* 固定ヘッダーのアニメーション */
.head-animation {
  transform: translateY(-100%);
}

JavaScriptによって.head-animationクラスがヘッダーに追加されたら、「translateY(-100%)」で非表示にしています。

あとがき

jQueryを使わない素のJavaScriptなので、全然重くなった感じがしなくて良いですね。

ヘッダーが下スクロールで消えて上スクロールで復活する動きは最近よく見かけるので、クライアントから同じような挙動にしてほしいというリクエストが増えるかもしれません。覚えておくと役立つと思います。