【jQuery】スクロールでヘッダーのナビゲーションやサイドバーを固定する

こんにちは、Ryohei（@ityryohei）です！

スクロールでヘッダーのナビゲーションやサイドバーを固定する方法をご紹介します。

コンテンツの量が多い場合、１ページの表示がどうしても長くなってしまいます。ヘッダーを固定表示にしたり、横に簡易的なメニューを用意しておくことでページの離脱率の減少が期待できます。

では解説していきます！

スクロールでヘッダーのナビゲーションを固定する

以下デモをご覧ください。

Demo

ページをスクロールしていくと、ヘッダーのナビゲーションが画面の上部にくっついて固定されるかと思います。

これは、スクロールした後ナビゲーションにfixedのクラスを追加して画面の丈夫に固定させています。fixedのクラスには以下のスタイルを定義しています。

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
}

このfixedクラスを、ページのスクロール位置によってナビゲーションに追加、削除しています。スクリプトは以下を使用しています。

JS

$(document).ready(function(){

  var main = $('main');
  var nav = $('nav');
  var navOffset = nav.offset();
  var fixedClass = 'fixed';

  $(window).on('load scroll',function(){
    if ($(window).scrollTop() > navOffset.top ) {
      $(main).css('margin-top','50px');
      nav.addClass(fixedClass);
    } else {
      $(main).css('margin-top','0');
      nav.removeClass(fixedClass);
    }
  });
});

上記スクリプトはナビゲーションの表示位置を取得して、スクロール位置がナビゲーションを過ぎたら、fixedクラスを追加して固定させる、という処理を実行しています。

if文の中のcssでmargin-topを追加しているのは、ナビゲーションにfixedを追加した際、ページからナビゲーションに設定されている高さが消えてしまうため、マージンを追加してページが崩れないようにしています。マージンを追加しないと高さが消えた際にページ全体が上にずれてしまいますので、ご注意下さい。

ここではHTMLとCSSをすべて紹介できていないですが、もしご覧になりたい方はデモページのソースを見ていただければと思います！

スクロールでサイドバーを固定する

こちらはヘッダーではなくサイドバーを固定する処理になります。

基本的にはヘッダーを固定する方法と同じですが、fixedに定義しているスタイルとスクリプトに指定する要素を変更しています。

以下デモです。

Demo

サイドバーを固定するデモで使用しているfixedクラスは以下となります。

CSS

.fixed {
  position: fixed;
  top: 0;
}

スクリプトも指定する要素を変えただけなので、実行している処理自体はヘッダーを固定する方法と変わりません。

JS

$(document).ready(function(){

  var sidebar = $('.sidebar');
  var sidebarOffset = sidebar.offset();
  var fixedClass = 'fixed';

  $(window).on('load scroll',function(){
    if ($(window).scrollTop() > sidebarOffset.top ) {
      sidebar.addClass(fixedClass);
    } else {
      sidebar.removeClass(fixedClass);
    }
  });
});

以上、スクロールでヘッダーのナビゲーションやサイドバーを固定する方法のご紹介でした！