Feste Seitenleiste Navigation in Fluid Twitter Bootstrap 2.0

Question

Ist es möglich, dass die Navigation der Seitenleiste immer auf Schriftrolle in Flüssigkeitslayout festhält?

Answer 1

Notiz: Es gibt ein Bootstrap JQuery -Plugin, das dies tut, und vieles mehr, das einige Versionen eingeführt wurde, nachdem diese Antwort geschrieben wurde (vor fast zwei Jahren) namens Affix. 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 Inhaltsdiv eine Offset -Klasse hinzu, um den linken Rand auszugleichen, wie so:

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

Ich habe meine Demo behoben, um das Responsive Bootstrap -Blatt zu unterstützen, jetzt fließt sie mit der reaktionsschnellen Funktion des Bootstraps.

Hinweis: Diese Demo fließt mit der obersten festen Navigatte, daher werden beide Elemente position:static Bei der Bildschirmgröße habe ich eine weitere Demo darunter platziert, die die feste Seitenleiste verwaltet, bis der Bildschirm für die mobile Ansicht fä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, bearbeiten hier.

^{Kleiner Anmerkung: Es gibt ungefähr 10px/1% Differenz in der Breite der festen Seitenleiste, da es sich darum handelt, dass ich die Breite aus dem Span3 -Container -Div nicht erben, da es fest ist Breite. Es ist nah genug.}

Und hier ist eine andere Methode, wenn Sie die Seitenleiste reparieren möchten, bis das Netz für kleine Bildschirm-/Mobile -Ansicht fä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, bearbeiten hier.

Answer 2

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

Answer 3

Dadurch wird das responsive Webdesign vermasselt. Wickeln Sie die feste Seitenleiste in einer Medienabfrage besser 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 behoben, wenn der Viewpot größer ist als 768px.

Answer 4

Dies ist ohne JavaScript nicht möglich. Ich finde Affix.js zu komplex, also benutze ich es lieber:

Stickyfloat

Answer 5

Ich begann mit Andres 'Antworten und bekam schließlich 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 das Ansichtsfenster geändert wird.

Answer 6

Sehr leicht zu bearbeiten Navigation oder alles, was Sie möchten. Alles, was Sie brauchen, ist, Ihr Fix -Tag wie dieses zu schreiben und es in Ihren Körperbereich zu stecken

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

Answer 7

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 neu eingebauten Container-Fluid-Klasse, was bedeutet, dass es leicht möglich ist, ein reaktionsschnelles Vollbildlayout zu haben.

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

Das folgende Setup beendet den Inhalt bei der Größe des Fensters auf weniger als 768px und veröffentlicht die feste Navigation.

Sehen http://www.bootply.com/epvnty1vii für ein funktionierendes Beispiel.

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>