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

Antworten:

168

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 .

Andres Ilich
quelle
Für mich in Chrome und Firefox hat diese Geige immer eine horizontale Bildlaufleiste (Chrome) unter einer Breite von ~ 1.016 Pixel. (Hier leichter zu sehen: jsfiddle.net/U8HGz/130/show, die nur / 1 ist, aber die Fensterbreite und -höhe unter "Hallo Welt; ich weiß nicht, was / 2 - / 129 sind.)
TJ Crowder
1
@TJCrowder, der auf die margin-left:290pxDeklaration der .span-fixed-sidebarKlasse zurückzuführen ist, die Platz für die Seitenleiste gemacht hat. Wenn diese nicht vorhanden wäre, würde der Inhalt die Seitenleiste auf kleineren Bildschirmen überlappen. Sie können die horizontale Bildlaufleiste jedoch entfernen, indem Sie sie explizit auf dem bodyTag ausblenden body { overflow-x: hidden; }.
Andres Ilich
Vielen Dank. Das könnte mit einer Medienabfrage oder so etwas funktionieren (also in wirklich engen Fenstern); aber an diesem Punkt möchte man wahrscheinlich trotzdem die Seitenleiste verschieben.
TJ Crowder
1
@mauris hat behoben, dass meine Demo die Reaktionsfunktion des Bootstraps unterstützt.
Andres Ilich
1
@miguelcobain hier ist eine feste Version , die zwar nicht vollständig getestet wurde, aber unter meiner Testumgebung einwandfrei funktioniert hat. Eine andere Lösung wäre die Verwendung des Affix- Bootstrap-Plugins, das native Unterstützung für feste Abschnitte auf dem Bootstrap bietet. Diese Lösung wurde zu einer Zeit geschrieben, als wir noch keine hatten.
Andres Ilich
46

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

Joyrex
quelle
@ AlexanderRechsteiner Nicht wirklich. Das OP erwähnt ausdrücklich Bootstrap 2.0.
Kyle
27

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.

HaNdTriX
quelle
1

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

Stickyfloat

Zuhaib Ali
quelle
0

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.

mdashx
quelle
0

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>
Verdier
quelle
0

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>
Christian.D
quelle