【jQuery】一定量スクロールしたら画面上部に固定するヘッダーメニューの作り方

今回は一定量スクロールしたら画面上部に固定されるスティッキーヘッダーの作り方を紹介します。

途中で固定されるスティッキーヘッダーはjQueryでサクッと作ることができます。

HTMLとCSSは省略します。好きなように作りましょう。

 

jQueryコード

以下のコードをまるっとコピペしましょう。対象のセレクタは各自書き換えてください。

$(function() {
  var header = $('.header');
  var headerHeight = header.innerHeight();
  $(window).scroll(function() {
    var scr_count = $(window).scrollTop();
    if (headerHeight < scr_count) {
      $('body').addClass('l-fixed');
    } else {
      $('body').removeClass('l-fixed');
    }
  });
});

 

スクロール量を計測する変数scr_countがヘッダーの高さ分のスクロール量を超えたら.l-fixedクラスを追加して固定します。それ以外(スクロール量がヘッダーの高さより少ない時)は.l-fixedクラスを外して通常通りにします。

やっていることはスクロール量の計測とクラスの付け外しだけです。