jQueryで特定位置までスクロールしたら追従するヘッダーを実装する方法

jQueryで特定位置までスクロールしたら追従するヘッダーを実装する方法を紹介します。

実際にWeb制作の現場でもよく使うテクニックで、実用性が高いと思います。

特定位置までスクロールしたら追従するヘッダーのサンプルコード

特定位置までスクロールしたら追従するヘッダーのサンプルコード

HTML

<header class="header"></header>
<div class="mainvisual"></div>
<div class="contents"></div>
<footer class="footer"></footer>

ヘッダーエリアの下にメインビジュアルがあり、その下にコンテンツ、一番下にフッターがあるイメージです。

CSS

.header {
  width: 100%;
  height: 50px;
  background: #ec4646;
}
.mainvisual {
  width: 100%;
  height: 400px;
  background: #663f3f;
}
.contents {
  width: 100%;
  height: 800px;
  background: #51c2d5;
}
.footer {
  width: 100%;
  height: 100px;
  background: #bbf1fa;
}
.fixed {
  position: fixed;
}

サンプル用にエリアごとで色分けしています。
.fixedクラスが今回の鍵となります。

jQuery

$(function() {
  var height = $('.contents').offset().top;
  $(window).on("scroll", function() {
    if ($(this).scrollTop() > height ) {
      $(".header").addClass('fixed');
    } else {
      $(".header").removeClass('fixed');
    }
  });
});

$(‘.contents’).offset().top;でコンテンツエリアの位置を取得し、そこまでスクロールすると.headerに.fixedクラスを付与します。
また、指定位置より上に戻ったら追従を解除させるために、elseにはremoveClass(‘fixed’);を記述しています。