下にスクロールで非表示、上にスクロールで再表示する固定ヘッダーを実装する方法

下にスクロールで非表示、上にスクロールで再表示する固定ヘッダーを実装する方法

下にスクロールで非表示、上にスクロールで再表示する固定ヘッダーを実装する方法

下にスクロールしたら消え、上にスクロールすると再表示される固定ヘッダーを実装する方法をご紹介いたします。

以前、素のJavaScriptで実装する方法はご紹介しましたが、今回はjQuery版です。

下にスクロールで非表示、上にスクロールで再表示する固定ヘッダーを実装する方法

固定ヘッダーのCSSはこんな感じです。transitionを追加しておくことで、ヌルっと表示/非表示されます。

header {
  width: 100%;
  padding: 10px 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  transition: all .3s ease;
}

jQueryは以下のようにします。</body>の直前に追加すればOKです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
  var hd_size = $('header').innerHeight(); //ヘッダーの高さを取得
  var pos = 0;
  $(window).on('scroll', function () {
    var current_pos = $(this).scrollTop(); //現在の位置を取得
    if (current_pos < pos || current_pos == 0) { //上にスクロール もしくは 最上部
      $('header').css({ 'top': 0 }); //ヘッダーを表示
    } else {
      $('header').css({ 'top': '-' + hd_size + 'px' }); //ヘッダーを非表示(下にスクロール)
    }
    pos = current_pos;
  });
});
</script>

挙動を逆にする場合

上にスクロールで非表示、下にスクロールで再表示と、逆の動きにしたい場合は、以下のように記述します。if文の比較演算子を逆にするだけです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
  var hd_size = $('header').innerHeight();
  var pos = 0;
  $(window).on('scroll', function () {
    var current_pos = $(this).scrollTop();
    if (current_pos > pos || current_pos == 0) {
      $('header').css({ 'top': 0 });
    } else {
      $('header').css({ 'top': '-' + hd_size + 'px' });
    }
    pos = current_pos;
  });
});
</script>

あとがき

素のJavaScriptに比べるとコードの記述量も少ないです。脱jQueryの動きが盛んになってきていますが、なんだかんだでjQueryを使うと楽ですね。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です