jquery - Bootstrap 3.0 で固定サイド ナビゲーション バーを作成する

Question

My Web Site の左側に Sticky Side Navbar を作成したいと考えています。& Bootstrap 3 RC2 を使用しています。作成方法がわかりません。

Answer 1

サイドバーが固定されたときの CSS を定義する必要があります...

例えば、

#sidebar.affix {
    position: fixed;
    top:25px;
    width:228px;
  }

これが実際の例です: http://bootply.com/73864

Answer 2

あなたが参照している粘着性のあるナビゲーション バーは、接辞プラグインのおかげで可能です。これでブートストラップのドキュメントを表示できます。

このJsfiddleには、動作するスティッキー サイドバーが含まれています (正しく動作することを確認するには、結果ウィンドウを大きくしてください)。同じサイドバーを作成するために読んでください。

1. サイドバーの html を作成します。この例では、ウェル内でブートストラップ nav-pills を使用します。

<div class="row">
  <div class="col-sm-3">
    <div class="well bs-sidebar affix" id="sidebar">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </div> <!--well bs-sidebar affix-->
  </div> <!--col-sm-3-->
  <div class="col-sm-9">
    <p>Main body content goes here</p>
  </div> <!--col-sm-9-->
</div> <!--row-->

2. js ファイルで接辞プラグインを呼び出します

$('#sidebar').affix({
  offset: {
    top: $('header').height()
  }
}); 

「ヘッダー」をサイドバーの上にあるものに置き換える必要があります。ブートストラップ ナビゲーション バーを使用していて、それがサイドバーの真上にある場合は、「header」をナビゲーション バーに使用しているクラスに置き換えます。次に例を示します。

top: $('.navbar navbar-default').height()

3.接辞クラスのcssを追加

非レスポンシブ レイアウトの CSS

.bs-sidebar.affix {
  width: 263px;
  top: 25px;
}

レスポンシブレイアウト用CSS

@media (min-width: 768px) {
  .bs-sidebar.affix {
    width: 158px;
    top: 25px;
  }
}

@media (min-width: 992px) {
  .bs-sidebar.affix {
    width: 213px;
    position: fixed;
    top: 25px;
  }
}

@media (min-width: 1200px) {
  .bs-sidebar.affix {
    width: 263px;
  }
}