Die Navigation in der Seitenleiste in flüssigem Twitter-Bootstrap 2.0 wurde behoben

Ist es möglich, dass die Navigation in der Seitenleiste beim flüssigen Layout immer auf dem Bildlauf fixiert bleibt?

Hinweis: Es gibt ein Bootstrap-jQuery-Plugin, das dies und vieles mehr tut und einige Versionen nach dem Schreiben dieser Antwort (vor fast zwei Jahren) mit dem Namen Affix eingeführt wurde . Diese Antwort gilt nur, wenn Sie Bootstrap 2.0.4 oder niedriger verwenden.

Ja, erstellen Sie einfach eine neue feste Klasse für Ihre Seitenleiste und fügen Sie Ihrem Inhaltsbereich eine Offset-Klasse hinzu, um den linken Rand wie folgt auszugleichen:

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

Aktualisieren

Meine Demo wurde behoben, um das reaktionsfähige Bootstrap-Blatt zu unterstützen. Jetzt fließt es mit der reaktionsschnellen Funktion des Bootstraps.

Hinweis: Diese Demo wird mit der oberen festen Navigationsleiste ausgeführt, sodass beide Elemente position:staticbeim Ändern der Bildschirmgröße geändert werden. Ich habe eine weitere Demo darunter platziert, die die feste Seitenleiste beibehält, bis der Bildschirm für die mobile Ansicht abfällt.

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 , hier bearbeiten .

^{kleiner Hinweis: Es gibt einen Unterschied von 10px / 1% bei der Breite der festen Seitenleiste, was darauf zurückzuführen ist, dass ich, da es die Breite nicht vom span3-Container div erbt, weil es fest ist, ein a einfallen lassen musste Breite. Es ist nah genug.}

Und hier ist eine andere Methode, wenn Sie die Seitenleiste festhalten möchten, bis das Raster für eine kleine Bildschirm- / Mobilansicht abfällt.

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 , hier bearbeiten .

Die neueste Boostrap (2.1.0) verfügt über eine neue JS-Funktion "Affix" speziell für diese Art von Anwendung, FYI.

Dies wird das reaktionsschnelle Webdesign vermasseln. Binden Sie die feste Seitenleiste besser in eine Medienabfrage ein.

CSS

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

HTML

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

Jetzt ist die Seitenleiste nur noch fixiert, wenn der Viewpot größer als 768px ist.

Dies ist ohne Javascript nicht möglich. Ich finde affix.js zu komplex, deshalb benutze ich lieber:

Stickyfloat

Ich begann mit Andres 'Antworten und bekam eine klebrige Seitenleiste wie diese:

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

Ich gehe davon aus, dass ich auch JS benötige, um die Variable 'sidebarwidth' zu aktualisieren, wenn die Größe des Ansichtsfensters geändert wird.

Sehr einfach, Navi oder alles, was Sie wollen, zu reparieren. Alles, was Sie brauchen, ist, Ihr Fix-Tag so zu schreiben und es in Ihren Body-Bereich einzufügen

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

Mit der aktuellen Bootstrap-Version (3.3.2) gibt es eine gute Möglichkeit, eine feste Seitenleiste für die Navigation zu erreichen.

Diese Lösung funktioniert auch gut mit der wieder eingeführten Container-Fluid-Klasse, was bedeutet, dass ein reaktionsschnelles Vollbild-Layout leicht möglich ist.

Normalerweise müssten Sie feste Breiten und Ränder verwenden, oder die Navigation würde den Inhalt überlappen, aber mit Hilfe der leeren Platzhalterspalte wird der Inhalt immer an der richtigen Stelle positioniert.

Das folgende Setup umschließt den Inhalt, wenn Sie die Fenstergröße auf weniger als 768 Pixel ändern und die feste Navigation freigeben.

Ein funktionierendes Beispiel finden Sie unter 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>