【jQuery】サイドバーを固定表示させる方法とは

　画面をスクロールしてもサイドバーを固定して表示させたい、という時が出てくる場合があります。
例えば、広告や記事一覧部分などですね。見本として以下のようなページを作成しました。

デモページ

このように、画面をスクロールするとサイドバーが固定表示され、フッターまでスクロールすると固定が解除されるように設定することで、サイドバーがフッターに重なることを防いでいます。
そしてこのようにサイドバーを固定して表示させたい場合は、jQueryで実装することができます！

そこで今回は画面をスクロールしてもサイドバーを固定表示させる方法をご紹介したいと思います！

jueryコード

　それでは早速jQueryのコードを紹介したいと思います！

<script>
$(window).load(function(){
  var navi = $('sidebar');
  var main  = $('#content');

  var target_top = navi.offset().top - parseInt(navi.css('margin-top'),10);
  var sub_top = main.offset().top - parseInt(main.css('margin-top'),10);
  var sub_scroll = main.offset().top + main.outerHeight(true) - navi.outerHeight(true) - parseInt(navi.css('margin-top'),10);

  if (navi.outerHeight(true) + target_top < main.outerHeight(true) + sub_top) {
    $(window).scroll(function () {
      var ws = $(window).scrollTop();
      $('.scroll').text(ws);
      if (ws > sub_scroll) {
        navi.css({position:'fixed', top: sub_scroll - ws + 'px'});
      } else if(ws > target_top) {
        navi.css({position:'fixed', top: '20px', width: '260px'});
      } else {
        navi.css({position:'relative', top: '0px', width: '260px'});
      }
    });
  }
});
</script>

固定させたいコンテンツを指定する

　まず初めに上のコードの3行目にある

var navi = $(sidebar’);

に固定表示させたいものを記述します。今回はサイドバー全体を固定表示させたいため、sidebarと記述しましたが、例えば<div id=”a”>～</div>を固定表示させたい場合は

var navi = $(“#a”);

と記述してあげます。

メインコンテンツを指定する

　続いて上の見本コードの4行目にある

var main = $(‘#content’);

はメインコンテンツ部分のID名ないしclass名を入れましょう。

サイドバーを固定表示させた際のCSSを設定する

　また、見本コードの17行目にある

navi.css({position:’fixed’, top: ’20px’, width: ‘260px’});

はサイドバーを固定表示させるためのCSSを設定している部分であり、内容としてはサイドバーをposition: fixed;で固定し、なおかつtopから20pxのところで幅260pxで表示するよう設定しています。
幅は、サイドバーで元々設定している幅と同じ数値を入れてあげるとうまく表示されると思います(^^)

サイドバーの固定表示を解除させた際のCSSを設定する

　最後に19行目にある

navi.css({position:’relative’, top: ‘0px’, width: ‘260px’});

はページを下までスクロールし、サイドバーを固定させていた状態からまたページを上にスクロールした際に適用させるサイドバーのCSSになります。

まとめ

　以上がサイドバーの固定表示方法になります！

今回紹介したjQueryは応用次第ではいろいろ使えるので、かなりオススメです！実際にサイトに実装してみて、どのような動きになるのかいろいろ試してみてはいかがでしょうか？？