Fluid Twitter Bootstrap 2.0のサイドバーナビゲーションを修正

流動的なレイアウトで、サイドバーナビゲーションを常にスクロールに固定することは可能ですか？

注：これを行うブートストラップjQueryプラグインがあり、この回答が書かれた後（ほぼ2年前）Affixと呼ばれるいくつかのバージョンで導入されたプラグインがあります。この回答は、Bootstrap 2.0.4以下を使用している場合にのみ適用されます。

はい、単純にサイドバーの新しい固定クラスを作成し、オフセットクラスをコンテンツdivに追加して、左マージンを補います。

CSS

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

デモ：http : //jsfiddle.net/U8HGz/1/show/ ここで編集：http : //jsfiddle.net/U8HGz/1/

更新

レスポンシブブートストラップシートをサポートするようにデモを修正しました。今度は、ブートストラップのレスポンシブ機能でフローします。

注：このデモは上部の固定ナビゲーションバーで流れるため、両方の要素がposition:static画面のサイズ変更時に有効になります。モバイルビューで画面がドロップするまで固定サイドバーを維持する別のデモを下に配置しました。

CSS

.sidebar-nav-fixed {
     position:fixed;
     top:60px;
     width:21.97%;
 }

 @media (max-width: 767px) {
     .sidebar-nav-fixed {
         width:auto;
     }
 }

 @media (max-width: 979px) {
     .sidebar-nav-fixed {
         position:static;
        width: auto;
     }
 }

HTML

<div class="container-fluid">
<div class="row-fluid">
 <div class="span3">
   <div class="well sidebar-nav sidebar-nav-fixed">
    ...
   </div><!--/.well -->
 </div><!--/span-->
 <div class="span9">
    ...
 </div><!--/span-->
</div><!--/row-->

</div><!--/.fluid-container-->

デモ、ここで編集してください。

^{マイナーな注意：固定サイドバーの幅には約10px / 1％の違いがあります。これは、固定されているため、span3コンテナーdivから幅を継承しないため、幅。それは十分に近いです。}

また、小さな画面/モバイルビューでグリッドが下がるまでサイドバーを固定したままにする場合の別の方法を次に示します。

CSS

.sidebar-nav-fixed {
    position:fixed;
    top:60px;
    width:21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position:static;
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top:70px;
    }
}

デモ、ここで編集してください。

最新のBoostrap（2.1.0）には、このタイプのアプリケーション、FYI専用の新しいJS "affix"機能があります。

これは応答性の高いウェブデザインを台無しにするでしょう。固定サイドバーをメディアクエリでより適切にラップします。

CSS

@media (min-width: 768px) { 
  .sb-fixed{
    position: fixed;
  } 
}

HTML

<div class="span3 sb-fixed">
   <div class="well sidebar-nav">
      <!-- Sidebar Contents -->
   </div>
</div>

サイドバーは、ビューポットが768pxより大きい場合にのみ修正されました。

これはJavaScriptなしでは不可能です。affix.jsが複雑すぎるので、次のように使用します。

スティッキーフロート

私はアンドレスの回答から始め、次のような粘着性のあるサイドバーを取得することになりました。

HTML：

<div class="span3 sidebar-width">
  <div class="well sidebar-nav-fixed">
    Sidebar
  </div>
</div>

<div class="span9 span-fixed-sidebar">
  Content
</div> <!-- /span -->

CSS：

.sidebar-nav-fixed {
  position:fixed;
}

JS / jQuery：

sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);

ビューポートのサイズが変更されたときに、 'sidebarwidth'変数を更新するためにJSも必要だと思います。

修正ナビまたは必要なすべてのタグを取得するのは非常に簡単です。必要なのは、このように修正タグを記述し、それをbodyセクションに配置することだけです。

   <div style="position: fixed">
       test - try  scroll again. 
   </div>

現在のBootstrapバージョン（3.3.2）では、ナビゲーションの固定サイドバーを実現するための良い方法があります。

このソリューションは、再導入されたコンテナー流体クラスでも適切に機能します。つまり、応答性の高いフルスクリーンレイアウトを簡単に実現できます。

通常は、固定幅とマージンを使用する必要があります。そうしないと、ナビゲーションがコンテンツと重なってしまいますが、空のプレースホルダー列を利用して、コンテンツは常に適切な場所に配置されます。

以下の設定では、ウィンドウのサイズを768px未満に変更すると、コンテンツが折り返され、固定ナビゲーションが解放されます。

実際の例については、http：//www.bootply.com/ePvnTy1VIIを参照してください。

CSS

@media (min-width: 767px) { 
    #navigation{
        position: fixed;
    }
}

HTML

<div class="container-fluid">
 <div class="row">
  <div id="navigation" class="col-lg-2 col-md-3 col-sm-3">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
    </ul>
  </div>

  <div class="col-lg-2 col-md-3 col-sm-3 hidden-xs">
    <!-- Placeholder - keep empty -->
  </div> 

  <div id="main" class="col-lg-10 col-md-9 col-sm-9 fill">
     ...
     Huge Content
     ...
  </div> 
 </div>
</div>