jQueryでサイドバーを追従させる方法

2018 9/10

2018.09.10

サイドバーって画面をスクロールさせていくと最後のほうは何も表示されなくなっちゃいますよね。

せっかくスペースがあるなら常に何か表示させておきたいと思うものです。

そこで今回は画面をスクロールするとサイドバーが固定表示されるものを作ってみました。

仕様は以下の通りです。

スクロールしたときにサイドバーが画面上部で固定表示される。
ヘッダーが表示されているときはヘッダーと被らない。
フッターが表示されているときはフッターと被らない。

サンプルコード

下に記載したコードは関係する部分だけを抜粋しています。

動くサンプルはこちらからどうぞ。

[btn class=”simple”]追従するサイドバーのサンプル[/btn]

HTML（関係ない部分は省いてます）

<!doctype html>
<html lang="ja">
  <head></head>
  <body>
    <div id="container">
      <header></header>
      <nav id="headernav"></nav>
      <div id="content">
        <div id="inner-content" class="clearfix tuiju">
          <main id="main" style="min-height: 1000px;">
            <article>
              <header>
                <h1>jQueryテスト用</h1>
              </header>
              <section>
                <input type="button" id="btna" value="ボタンA" />
              </section>
              <footer></footer>
            </article>
          </main>
          <div id="sidebar" class="sideab">
            <div class="sidetext">
              <h4>新着情報</h4>
              <div class="sidetextlist">
                <ul>
                  <li><a href="https://swell.dev-lib.work">あいうえお</a></li>
                  <li><a href="https://swell.dev-lib.work">かきくけこ</a></li>
                  <li><a href="https://swell.dev-lib.work">さしすせそ</a></li>
                  <li><a href="https://swell.dev-lib.work">たちつてと</a></li>
                  <li><a href="https://swell.dev-lib.work">なにぬねの</a></li>
                </ul>
              </div>
            </div><!-- /.sidetext -->
            <div class="sidetext">
              <h4>ランキング</h4>
              <div class="sidetextlist">
                <ul>
                  <li><a href="https://swell.dev-lib.work">あいうえお</a></li>
                  <li><a href="https://swell.dev-lib.work">かきくけこ</a></li>
                  <li><a href="https://swell.dev-lib.work">さしすせそ</a></li>
                  <li><a href="https://swell.dev-lib.work">たちつてと</a></li>
                  <li><a href="https://swell.dev-lib.work">なにぬねの</a></li>
                </ul>
              </div>
            </div><!-- /.sidetext -->
            <div class="sidetext">
              <h4>カテゴリー</h4>
              <div class="sidetextlist">
                <ul>
                  <li><a href="https://swell.dev-lib.work">あいうえお</a></li>
                  <li><a href="https://swell.dev-lib.work">かきくけこ</a></li>
                  <li><a href="https://swell.dev-lib.work">さしすせそ</a></li>
                  <li><a href="https://swell.dev-lib.work">たちつてと</a></li>
                  <li><a href="https://swell.dev-lib.work">なにぬねの</a></li>
                </ul>
              </div>
            </div><!-- /.sidetext -->
          </div><!-- /#sidebar -->
        </div><!-- /#inner-content -->
      </div><!-- /#content -->
      <footer id="footer"></footer>
    </div><!-- /#container -->
  </body>
</html>

CSS（関係ない部分は省いてます）

#sidebar {
  width: 336px;
  float: right;
}

#sidebar h4 {
  margin-top: 0;
  margin-bottom: 10px;
  background-color: #04089b;
  color: #FFFFFF;
  padding: 5px 15px;
  cursor: pointer;
}
#sidebar .sidetextlist  ul {
  padding: 0;
  margin-top: 0;
}
#sidebar .sidetextlist li {
  list-style: none;
}

#sidebar.sidefixed {
  position: fixed;
  top: 50px;
  right: calc(50% - 580px);
}
#sidebar.sideab {
  position: absolute;
  bottom: 50px;
  right: 0;
}
#inner-content.tuiju {
  position: relative;
}

jQuery

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2'></script>
<script type="text/javascript">
$(function(){
  $(window).on('scroll resize', function() {
    // スクロール位置
    var scroll = $(document).scrollTop();
    // コンテンツエリアのトップ
    var contenttop = $("#content").offset().top;
    // サイドバーの左位置
    var sideleft = $("#sidebar").offset().left;
    // サイドバーの高さ
    var sideheight = $("#sidebar").outerHeight();
    // サイドバーの上マージン
    var sidemargintop = 50;
    // サイドバーの下マージン
    var sidemarginbottom = 50;
    // フッターTOP位置
    var footertop = $("#footer").offset().top;
    
    if (scroll > (footertop - sidemarginbottom - sidemargintop - sideheight)) {
      // フッターにあたった場合
      $("#sidebar").css({
        'position': 'absolute',
        'top': 'auto',
        'bottom': '50px',
        'right': '0',
        'width': '336px'
      });
    } else if (scroll > (contenttop - sidemargintop)) {
      // 追従時
      $("#sidebar").css({
        'position': 'fixed',
        'top': '50px',
        'bottom': 'auto',
        'right': 'calc(50% - 580px)',
        'width': '336px'
      });
    } else {
      // 追従するまでスクロールされてないとき
      $("#sidebar").css({
        'position': 'static',
        'top': 'auto',
        'bottom': 'auto',
        'right': 'auto'
      });
    }
  });
});
</script>