Bootstrap3で固定サイドバー(affix & scrollspy)を使用する


概要

スティッキーサイドバー(固定サイドバー)は affix のみで可能
scrollspy は、現在のスクロール位置によって、関連した要素に .active クラスを付与

デモ

※サンプルのため、 xs(<768px)でも、サイドバーを表示。


HTML

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>スティッキーサイドバーのサンプル</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <style>
    /* 必須のスタイル指定(affix用) */
    .algo13-sidebar.affix {
        position: fixed;
        top: 20px;
    }
    /* 必須のスタイル指定(affix用) */
    .algo13-sidebar.affix-bottom {
        position: absolute;
    }
    /* アクティブセクションを赤太字にする(scrollspy用) */
    .algo13-sidebar .nav>.active:focus>a,
    .algo13-sidebar .nav>.active:hover>a,
    .algo13-sidebar .nav>.active>a {
        font-weight: 700;
        color: red;
    }
    /* サブセクションのスタイル(scrollspy用) */
    .algo13-sidebar .nav .nav>li>a {
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 30px;
    }
    /* 非アクティブのサブセクションを隠す(scrollspy用) */
    .algo13-sidebar .nav .nav {
        display: none;
        padding-bottom: 10px
    }
    /* アクティブのサブセクションを表示(scrollspy用) */
    .algo13-sidebar .nav>.active>ul {
        display: block
    }
    /* テストのための高さスタイル */
    .algo13-moderate-height { line-height: 100px; outline: 1px solid blue; }
  </style>
</head>
<body>
  <header class="bg-danger text-center lead algo13-moderate-height">ヘッダー</header>
  <div class="container">
    <div class="row">
      <!-- 本文を右に表示 -->
      <div class="col-xs-9 col-xs-push-3" role="main">
        <h1>スティッキーサイドバーのサンプル</h1>
        <h2 id="section-1">1個目のセクション</h2>
        <div id="section-1-sub-1" class="algo13-moderate-height">1個目の中身1</div>
        <div id="section-1-sub-2" class="algo13-moderate-height">1個目の中身2</div>
        <h2 id="section-2">2個目のセクション</h2>
        <div id="section-2-sub-1" class="algo13-moderate-height">2個目の中身1</div>
        <div id="section-2-sub-2" class="algo13-moderate-height">2個目の中身2</div>
      </div>
      <!-- サイドバーを左に表示 -->
      <div class="col-xs-3 col-xs-pull-9" role="complementary">
        <nav class="algo13-sidebar hidden-print"><!-- hidden-xs -->
          <ul class="nav">
            <li>
              <a href="#section-1">1個目のセクション</a>
              <ul class="nav">
                <li><a href="#section-1-sub-1">1個目の中身1</a></li>
                <li><a href="#section-1-sub-2">1個目の中身2</a></li>
              </ul>
            </li>
            <li>
              <a href="#section-2">2個目のセクション</a>
              <ul class="nav">
                <li><a href="#section-2-sub-1">2個目の中身1</a></li>
                <li><a href="#section-2-sub-2">2個目の中身2</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
  <footer class="bg-danger text-center lead algo13-moderate-height">フッター</footer>
  <script src="https://code.jquery.com/jquery-3.1.0.slim.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
  (function(window, $) {
    'use strict';
    $(function() {
      // スクロール位置と連動させない場合は不要(scrollspy用)
      $(document.body).scrollspy({ target: '.algo13-sidebar' });

      // スクロール位置と連動させない場合は不要(scrollspy用)
      $(window).on('load', function() { $(document.body).scrollspy('refresh') });

      // 固定サイドバーのスクロール追従開始&終了位置の設定(affix用)
      setTimeout(function() {
        $('.algo13-sidebar').affix({
          offset: {
            top: function() {
              return (this.top = $('header').outerHeight(true));
            },
            bottom: function() {
              return (this.bottom = $('footer').outerHeight(true));
            }
          }
        })
      }, 100);
    });
  })(window, jQuery);
  </script>
</body>
</html>