Jquery3を使用したスクロールによるサブヘッダー固定の方法

今回、ヘッダー下に作ったサブヘッダーのみをスクロールで固定する方法を簡単にご紹介します。

先に以下、サンプルになります。

See the Pen jquery3 scroll sub header fix by Taiki Takefushi (@cruw) on CodePen.

作成方法はとても簡単で、まず、CSSでサブヘッダーが固定したときのスタイルを定義します。

#サブナビID.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
}

スクロールに応じてClassを追加するのでサブヘッダーIDにプラスしてClass名「is-fixed」を付けておいてください。

そして、以下のようなJSを定義します。（Jquery3を予め読み込んでおいてください）

var $nav = $('#サブナビID');
var navHeight = $nav.outerHeight();
var body = $('body');
function navFixed(){
  var scroll = $(window).scrollTop();
  if (scroll > navHeight){
    $nav.addClass('is-fixed');
    body.css('padding-top', navHeight);
  }else{
    $nav.removeClass('is-fixed');
    body.css('padding-top', '0');
  }
}
$(function(){
  $(window).scroll(function (){
    navFixed();
  });
  $('body').on('touchmove', function() {
    navFixed();
  });
});

以上、たったこれだけでサブヘッダー固定が実装できたかと思います。

ぜひお試しあれ！

BLOGブログ

関連記事