Naprawiono nawigację na pasku bocznym w Fluid Twitter Bootstrap 2.0

Czy możliwe jest, aby nawigacja na pasku bocznym była zawsze ustawiona na przewijaniu w układzie płynnym?

Uwaga: Istnieje wtyczka bootstrap jQuery, która robi to i wiele więcej, która została wprowadzona kilka wersji po napisaniu tej odpowiedzi (prawie dwa lata temu) o nazwie Affix . Ta odpowiedź ma zastosowanie tylko w przypadku korzystania z Bootstrap 2.0.4 lub starszego.

Tak, po prostu utwórz nową stałą klasę dla paska bocznego i dodaj klasę przesunięcia do elementu div zawartości, aby uzupełnić lewy margines, na przykład:

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/ Edytuj tutaj: http://jsfiddle.net/U8HGz/1/

Aktualizacja

Naprawiono moje demo do obsługi responsywnego arkusza bootstrap, teraz przepływa z responsywną funkcją bootstrap.

Uwaga: To demo płynie z górnym stałym paskiem nawigacyjnym, więc oba elementy stają się position:staticpo zmianie rozmiaru ekranu, umieściłem poniżej kolejne demo, które utrzymuje stały pasek boczny, dopóki ekran nie spadnie dla widoku mobilnego.

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 , edytuj tutaj .

^{drobna uwaga: istnieje około 10px / 1% różnicy w szerokości stałego paska bocznego, jest to spowodowane faktem, że ponieważ nie dziedziczy on szerokości z elementu div kontenera span3, ponieważ jest ustalony, musiałem wymyślić szerokość. Jest wystarczająco blisko.}

A oto inna metoda, jeśli chcesz zachować pasek boczny, dopóki siatka nie spadnie dla małego ekranu / widoku mobilnego.

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 , edytuj tutaj .

Najnowszy Boostrap (2.1.0) ma nową funkcję „afiksu” JS, specjalnie dla tego typu aplikacji, FYI.

spieprzy to responsywny Webdesign. Lepiej zawiń stały pasek boczny zapytaniem o 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>

Teraz pasek boczny jest naprawiony tylko wtedy, gdy widok jest większy niż 768 pikseli.

Nie jest to możliwe bez javascript. Uważam, że afiks.js jest zbyt złożony, więc wolę używać:

stickyfloat

Zacząłem od odpowiedzi Andresa, a skończyłem na lepszym pasku bocznym, takim jak ten:

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

Zakładam, że potrzebuję również JS do aktualizacji zmiennej „sidebarwidth”, gdy rozmiar widoku zostanie zmieniony.

Bardzo łatwo jest uzyskać poprawioną nawigację lub dowolny tag. Wszystko, czego potrzebujesz, to napisać swój znacznik poprawki w ten sposób i umieścić go w sekcji body

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

W obecnej wersji Bootstrap (3.3.2) istnieje dobry sposób na uzyskanie stałego paska bocznego do nawigacji.

To rozwiązanie działa również dobrze z ponownie wprowadzoną klasą container-fluid, co oznacza, że ​​łatwo jest uzyskać responsywny układ pełnoekranowy.

Zwykle należałoby użyć stałych szerokości i marginesów lub nawigacja nakładałaby się na zawartość, ale za pomocą pustej kolumny zastępczej treść jest zawsze umieszczana we właściwym miejscu.

Poniższa konfiguracja zawija zawartość po zmianie rozmiaru okna do mniej niż 768px i zwalnia stałą nawigację.

Zobacz http://www.bootply.com/ePvnTy1VII, aby zapoznać się z działającym przykładem.

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>