Navbarとサイドバーに置いたNavを固定させる

BootstrapでNavbarとサイドバーとして利用したNavを固定し、それ以外の部分だけ移動可能なHTMLを作ろうとしたのにハマったことのメモを。

まずNavbarについては公式サイトの説明通りにやって画面上部に固定しました。これは問題なし。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">...</nav>

で、次にNavbarの下で４：８で左右を区切り、左側にNavを設定してAffixを有効にしました。ざっくりと以下のようなコードです。

    <div class="col-md-4">
      <div class="sidebar-nav affix" role="complementary">
        <ul class="nav">
          <li><a href="#">一番上</a></li>
          <li><a href="#bottom">一番下</a></li>
        </ul>
      </div>
    </div>

右側のメインコンテンツcol-md-8でグリッドを指定し、それより子の要素ではグリッドをネストしたりせず、ブロック要素で区切られた文章を並べただけです。

これでcol-md-*で想定しているサイズではうまく動作したのですが、ウィンドウサイズを小さくするとなぜかNavsの部分が右側要素の裏に隠れてしまいます。上に挙げた公式サイトでウィンドウサイズを小さくしてもらうとわかるのですが、NavがNavbarの下に動き、その下にメインコンテンツが続いて上下にスクロールするとすべて見られるようになることを期待していました。いろいろGoogleで調べてもみたのですが、ぴんとくる答えもなく、jsが原因なのかCSSが原因なのかも見極めがつきませんでした。

そこで、Chromeのデバッグツールを使って該当するNavがウィンドウサイズを変えるとCSS上でどのように変化するのかを自分のサイトとBootstrap公式サイトで比較してみました。すると、リサイズ前はposition: fixed;だったものがウィンドウサイズを小さくするとposition: static;に変化していました。これをヒントにBootstrap公式サイトでBootstrapに追加して使われているdocs.cssを見てみたところ、以下のような記述を見つけました。

/*
 * Side navigation
 *
 * Scrollspy and affixed enhanced navigation to highlight sections and secondary
 * sections of docs content.
 */

/* By default it's not affixed in mobile views, so undo that */
.bs-sidebar.affix {
  position: static;
}

/* 中略 */

@media (min-width: 992px) {
  .bs-sidebar .nav > .active > ul {
    display: block;
  }
  /* Widen the fixed sidebar */
  .bs-sidebar.affix,
  .bs-sidebar.affix-bottom {
    width: 213px;
  }
  .bs-sidebar.affix {
    position: fixed; /* Undo the static from mobile first approach */
    top: 80px;
  }
  .bs-sidebar.affix-bottom {
    position: absolute; /* Undo the static from mobile first approach */
  }
  .bs-sidebar.affix-bottom .bs-sidenav,
  .bs-sidebar.affix .bs-sidenav {
    margin-top: 0;
    margin-bottom: 0;
  }
}

画面サイズに応じてaffix指定されたナビゲーションのpositionを変えているのですね。これを作成中のサイトに適用したところ、無事望むような動きをしてくれました。