特定位置までスクロールしたらヘッダーを固定させる方法【jQuery】

2020/12/25

jQueryとCSSを使って、特定の位置までスクロールした時に、ページ最上部にポン！と固定されるヘッダーナビゲーションを作る方法をご紹介。

以下のようなお悩みを抱えている方の助けになれると思います！

初期状態ではヒーロエリアの直下にあるナビゲーションを、ヒーロエリアまでスクロールしたら最上部に固定したい
上記の超絶シンプルなデモが見たい、コピペしてすぐに動作するか確かめたい

それでは作り方、サンプルコードを見ていきましょう。

スクロールで途中から最上部に固定するヘッダーのサンプルコード

スクロールで途中から最上部に固定するヘッダーのサンプルコード

デモ

See the Pen 特定の位置までスクロールしたら固定するヘッダー by 石森裕也 (@yuyaphotograph) on CodePen.

HTML

<div class="Hero"></div>
<div class="Nav"></div>
<div class="Content"></div>
<div class="Content02"></div>

CSS

/* ---------------------------- */
/* --- ヘッダー --- */
/* ---------------------------- */
.Nav{
  width: 100%;
  height: 56px;
  background: #f4a907;
}
.Nav.sticky{
  position: fixed;
  top: 0;
  left: 0;
}
/* ---------------------------- */
/* --- それ以外 --- */
/* ---------------------------- */
.Hero{
  width: 100%;
  height: 200px;
  background: #0fbfae;
}
.Content{
  width: 100%;
  height: 800px;
  background: #eee;
}
.Content02{
  width: 100%;
  height: 480px;
  background: #999;
}

Navに「sticky」クラスがついたときにposition:fixedで固定するスタイリングが肝です。

jQuery

$(function() {
  let target = $(".Nav").offset().top;
  $(window).on("scroll", function() {
    let currentPos = $(window).scrollTop();
    if(currentPos > target) {
      $(".Nav").addClass('sticky');
    } else{
      $(".Nav").removeClass('sticky');
    }
  });
});

offset().topで、ヘッダー要素の位置を取得します。

$(window).scrollTop()で、現在の位置を取得します。

スクロール量が、ヘッダー要素の位置を超えたときに、ヘッダー要素にstickyクラスを付与します。

それ以外のときは、stickyクラスを外します。

次はこの記事！