ページのスクロールに対してサイドバーを固定する方法(jQuery、CSS)

今回は、ページのスクロールに対して、サイドバーを固定する方法を紹介する。2012年9月現在、当ブログの右側のサイドバーがこの指定になっており、長文で縦長になっている記事に対してもサイドバーが追随するようになっている。

主にjQueryとCSSを用いて実装する(HTMLも一部追記)。

サイドバーの固定と固定解除の方法

まずは、準備のために、divなどで囲んだサイドバーの中に、もう1つdivを設け、class名を設定。今回side_wrapperというクラス名にしたが、以後に紹介するjQuery、CSSのコードと整合性が取れれば、class名は自由。

サイドバー内にdivを追加 – HTMLファイル

<div id="side_bar">
  <div class="side_wrapper">

    <!-- サイドバー部分 -->
    <!-- サイドバー部分 -->
    <!-- サイドバー部分 -->

  </div>
</div>

jQueryでは、様々な要素の高さを取得し、計算している。計算結果により、side_wrapperのdivにclass名「affix」を追加したり、削除したりしている。affixクラスの時に、サイドバーはスクロールに追随する。

様々な要素の高さを取得、計算 – jQueryプログラム

jQuery(function() {

  // 広告のページトップからの高さを取得
  var ad_top = jQuery("div.ad_side_foot").offset().top;
  var ad_bottom = ad_top + 250;

  // 記事とコメントを足した高さを取得
  var content_height = jQuery("div#content.report").height();

  // 読み込み時に開いたウィンドウの高さを取得
  var window_height = jQuery(window).height();

  // ウィンドウのサイズを変えたときの高さを取得
  jQuery(window).resize(function(){
    window_height = jQuery(this).height();
  });

  // スクロールに対してスクロール位置を計算し、
  // Classを加えたり、除去したりする。
  jQuery(window).scroll(function(){
    if (content_height > ad_bottom) {
      var scroll_height = jQuery(this).scrollTop();

      // if文の「-30」は下から30pxの所で止めることと
      // 整合性をとるために記述した。
      // 後述のCSSのbottomと同じ値に設定する。
      if ((scroll_height + window_height - 30) >= ad_bottom) {
        jQuery("div.side_wrapper").addClass("affix");
      } else {
        jQuery("div.side_wrapper").removeClass("affix");
      }
    }
  });

});

また、CSSに以下を追記する。positionをfixedにし、下から30pxのところで固定されるように設定した。widthは各自のサイドバーの幅を指定すると良い。

affixクラスのCSS設定 – CSSファイル

/* サイドバーのaffix */
div.affix {
    position: fixed;
    width: 250px;
    bottom: 30px;
}

関連記事

jQuery利用前の準備(ダウンロード、HTMLでの読み込み)
HTMLの読み込み後にjQueryのプログラムを実行する方法
jQueryの基本的な記述方法(セレクタと命令)

コメント

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/jquery/1527/trackback/