Fluid twitter bootstrap 2.0'da kenar çubuğu gezintisi düzeltildi

Kenar çubuğu gezinmesinin her zaman akış düzeninde kaydırmada sabit kalmasını sağlamak mümkün mü?

Not: Bunu yapan bir bootstrap jQuery eklentisi var ve çok daha fazlası, bu yanıt yazıldıktan sonra (neredeyse iki yıl önce) Affix adıyla birkaç sürüm tanıtıldı . Bu yanıt yalnızca Bootstrap 2.0.4 veya daha düşük bir sürüm kullanıyorsanız geçerlidir.

Evet, kenar çubuğunuz için yeni bir sabit sınıf oluşturun ve sol kenar boşluğunu telafi etmek için içerik bölümünüze bir ofset sınıfı ekleyin, örneğin:

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/ Burada düzenleyin : http://jsfiddle.net/U8HGz/1/

Güncelleme

Demomun duyarlı önyükleme sayfasını desteklemesi için düzeltildi, şimdi önyüklemenin duyarlı özelliği ile akıyor.

Not: Bu demo üst sabit gezinti çubuğu ile akar, böylece her iki öğe de position:staticekran yeniden boyutlandırıldığında olur, aşağıya, mobil görünüm için ekran düşene kadar sabit kenar çubuğunu koruyan başka bir demo yerleştirdim.

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 , burada düzenleyin .

^{küçük not: Sabit kenar çubuğunun genişliğinde yaklaşık 10px /% 1'lik bir fark vardır, bunun nedeni, genişliği span3 kapsayıcı div'den miras almadığı için sabit olduğu için bir bulmam gerektiğidir. Genişlik. Yeterince yakın.}

Küçük ekran / mobil görünüm için ızgara düşene kadar kenar çubuğunu sabit tutmak istiyorsanız işte başka bir yöntem.

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 , burada düzenleyin .

En son Boostrap (2.1.0), özellikle bu tür uygulamalar için yeni bir JS "ek" özelliğine sahiptir, FYI.

bu duyarlı Web tasarımını alt üst eder. Sabit kenar çubuğunu bir ortam sorgusunda daha iyi sarın.

CSS

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

HTML

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

Artık kenar çubuğu yalnızca görüntü noktası 768 pikselden büyükse sabittir.

Javascript olmadan bu mümkün değildir. Affix.js'yi çok karmaşık buluyorum, bu yüzden şunu kullanmayı tercih ediyorum:

yapışkan şamandıra

Andres'in yanıtlarıyla başladım ve şu şekilde yapışkan bir kenar çubuğu elde ettim:

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

Görüntü alanı yeniden boyutlandırıldığında 'sidebarwidth' değişkenini güncellemek için JS'ye ihtiyacım olduğunu varsayıyorum.

Düzeltme nav veya istediğiniz her şey etiketini almak çok kolay. İhtiyacınız olan tek şey, düzeltme etiketinizi bu şekilde yazmak ve vücut bölümünüze koymak.

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

Mevcut Bootstrap sürümüyle (3.3.2), navigasyon için sabit bir kenar çubuğu elde etmenin güzel bir yolu var.

Bu çözüm aynı zamanda yeniden tanıtılan kap akışkan sınıfıyla da iyi çalışır, yani duyarlı bir tam ekran düzenine sahip olmanın kolayca mümkün olduğu anlamına gelir.

Normalde sabit genişlikler ve kenar boşlukları kullanmanız gerekir veya gezinme içerikle örtüşür, ancak boş yer tutucu sütunun yardımıyla içerik her zaman doğru yerde konumlandırılır.

Aşağıdaki kurulum, pencereyi 768 pikselden küçük olacak şekilde yeniden boyutlandırdığınızda içeriği sarar ve sabit gezinmeyi serbest bırakır.

Çalışan bir örnek için http://www.bootply.com/ePvnTy1VII adresine bakın .

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>