Memperbaiki navigasi sidebar di bootstrap twitter 2.0 yang lancar

Apakah mungkin membuat navigasi sidebar tetap selalu tertuju pada scroll dalam tata letak yang lancar?

Catatan: Ada plugin jQuery bootstrap yang melakukan ini dan banyak lagi yang diperkenalkan beberapa versi setelah jawaban ini ditulis (hampir dua tahun lalu) yang disebut Affix . Jawaban ini hanya berlaku jika Anda menggunakan Bootstrap 2.0.4 atau lebih rendah.

Ya, cukup buat kelas tetap baru untuk sidebar Anda dan tambahkan kelas offset ke div konten Anda untuk menutupi margin kiri, seperti:

CSS

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

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

Demo: http://jsfiddle.net/U8HGz/1/show/ Edit di sini: http://jsfiddle.net/U8HGz/1/

Memperbarui

Memperbaiki demo saya untuk mendukung lembar bootstrap responsif, sekarang mengalir dengan fitur responsif dari bootstrap.

Catatan: Demo ini mengalir dengan position:staticbilah navigasi tetap atas, jadi kedua elemen menjadi setelah pengubahan ukuran layar, saya menempatkan demo lain di bawah yang mempertahankan bilah sisi tetap hingga layar turun untuk tampilan seluler.

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-->

Demo , edit disini .

^{catatan kecil: ada sekitar 10px / 1% perbedaan pada lebar sidebar tetap, itu karena fakta bahwa karena itu tidak mewarisi lebar dari span3 container div karena sudah diperbaiki saya harus membuat sebuah lebar. Cukup dekat.}

Dan berikut adalah metode lain jika Anda ingin menjaga sidebar tetap sampai grid turun untuk tampilan layar kecil / seluler.

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;
    }
}

Demo , edit disini .

Boostrap terbaru (2.1.0) memiliki fitur "imbuhan" JS baru khusus untuk jenis aplikasi ini, FYI.

ini akan mengacaukan Desain Web responsif. Lebih baik membungkus sidebar tetap dalam kueri media.

CSS

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

HTML

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

Sekarang sidebar hanya diperbaiki, jika viewpot lebih besar dari 768px.

Ini tidak mungkin tanpa javascript. Saya menemukan affix.js terlalu rumit, jadi saya lebih suka menggunakan:

stickyfloat

Saya mulai dengan jawaban Andres dan akhirnya mendapatkan sidebar yang lengket seperti ini:

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);

Saya berasumsi saya juga perlu JS untuk memperbarui variabel 'sidebarwidth' saat viewport diubah ukurannya.

Sangat mudah untuk memperbaiki nav atau semua tag yang Anda inginkan. Yang Anda butuhkan hanyalah menulis tag perbaikan Anda seperti ini, dan meletakkannya di bagian tubuh Anda

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

Dengan versi Bootstrap saat ini (3.3.2) ada cara yang bagus untuk mencapai sidebar tetap untuk navigasi.

Solusi ini juga berfungsi dengan baik dengan kelas container-fluid yang diperkenalkan kembali, yang berarti sangat mungkin untuk memiliki tata letak layar penuh yang responsif.

Biasanya Anda perlu menggunakan lebar dan margin tetap atau navigasi akan tumpang tindih dengan konten, tetapi dengan bantuan kolom placeholder kosong, konten selalu diposisikan di tempat yang tepat.

Pengaturan di bawah ini membungkus konten saat Anda mengubah ukuran jendela menjadi kurang dari 768px dan melepaskan navigasi tetap.

Lihat http://www.bootply.com/ePvnTy1VII untuk contoh yang berfungsi.

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>