Wie klebrig CSS Position verwenden, um eine Seitenleiste sichtbar mit Bootstrap 4

Question

ich ein zwei Spalten wie folgt abstecken zu halten:

<div class="row"> 
    <div class="col-xs-8 content"> 
    </div> 
    <div class="col-xs-4"> 
    </div> 
</div> 

Wenn ich die position:sticky in die Seitenleiste Spalte, erhalte ich die klebrige Verhalten der Sidebar: https://codepen.io/marcanuy/pen/YWYZEp

CSS:

.sticky { 
    position: sticky; 
    top: 10px; 
} 

HTML:

<div class="row"> 
    <div class="col-xs-8 content"> 
    </div> 
    <div class="col-xs-4 sticky"> 
    </div> 
</div> 

Aber wenn ich die sticky Eigenschaft nur zum Menü, die in der Seitenleiste befinden, so dass die in Verbindung stehenden Artikel Abschnitt rollt normalerweise und bekommen das klebrig Verhalten mit dem Menü div, es funktioniert nicht:

<div class="row"> 
    <div class="col-xs-8 content"> 
    </div> 
    <div class="col-xs-4"> 
     <div class="menu sticky"> 
     </div> 
    </div> 
</div> 

Dies ist die Screencasts des ersten Beispiels die gesamte Seitenleiste mit einem klebrigen Verhalten Scrollen und dann die klebrige Eigenschaft in das Menü zu ändern das nicht funktioniert:

Bootstrap 4 recommends die sticky Eigenschaft als sank Unterstützung für das Affix jQuery-Plugin:

Dropped das Affix jQuery-Plugin. Wir empfehlen stattdessen eine Position: sticky polyfill.

Ich habe es in getestet:

in chrome://flags

aktiviert

Firefox 47.0 mit css.sticky.enabled=“true” unter about:config

Chrome 50.0.2661.94 (64-Bit) mit experimental Web Platform features

(Dies ist kein Duplikat von How to make a sticky sidebar in Bootstrap? bec aus, dass man mit BS anbringen)

Answer 1

Ich löste aktivieren flexbox. Ein Problem in Bootstrap des Github Repository Nach dem Anheben bekam ich eine Antwort durch eine Bootstrap member:

Die .col-xs-4 ist nicht so groß wie die .col-xs-8, so gibt es im Grunde keine Raum für das Menü zu "schweben" innerhalb, wenn die Klebrigkeit eintritt. Machen Sie die. Col-Xs-4 größer und die Dinge funktionieren gut: https://codepen.io/anon/pen/OXzoNJ Wenn Sie die Flexbox-Version unseres Grid-System aktivieren (über $ enable-flex: true ;), bekommen Sie automatisch gleichhohe Spalten kostenlos, was in Ihrem Fall praktisch ist.

Answer 2

Polyfill explanation.

Sie benötigen die JS polyfill aufzunehmen, um es zu benutzen.Der polyfills durch den Link auf der Seite Bootstrap zu empfehlen ist

• https://github.com/wilddeer/stickyfill
• https://github.com/filamentgroup/fixed-sticky

Hier ein aktualisierter ist codepen: https://codepen.io/anon/pen/zBpNRk

ich die erforderliche polyfill enthalten (I verwendet stickyfill) und nannte es mit

var stickyElements = document.getElementsByClassName('sticky'); 

for (var i = stickyElements.length - 1; i >= 0; i--) { 
    Stickyfill.add(stickyElements[i]); 
} 

Die Bibliothek vorgeschlagen, dass Sie verwenden diese für Ihre css

.sticky { 
    position: -webkit-sticky; 
    position: sticky; 
    top: 0; 
} 
.sticky:before, 
.sticky:after { 
    content: ''; 
    display: table; 
} 

und schließlich hatte man die div Ordnung durcheinander. Sie müssen die div mit der Sticky-Klasse außerhalb einer ganzen Zeile setzen, also füllte ich den Rest der Zeile mit einem anderen <div class="col-xs-6"></div>, der leer ist.

Answer 3

Die Antwort von @wrldbt funktioniert 4 Alpha 5 Bootstrap, aber in Alpha 6 der -xs Infix fallen gelassen wurde und das Gitter neu geschrieben wurden.

Ich habe etwas zusammen, ein bisschen sauberer, arbeiten mit der aktuellen Version von Bootstrap & auch eine klebrige Fußzeile mit flexbox.

https://codepen.io/cornex/pen/MJOOeb

Answer 4

Im Stall Bootstrap 4.0.0 Release, das die sticky-top Klasse erfolgt über ...

Demo

<div class="container"> 
    <nav class="navbar navbar-light bg-light navbar-expand"> 
     <a class="navbar-brand" href="#">Header</a> 
     ... 
    </nav> 
    <div class="row"> 
     <div class="col-8 content"> 
      Content 
     </div> 
     <div class="col-4"> 
      <div class="sticky-top"> 
       <h4>Sticky menu</h4> 
       ... 
      </div> 
     </div> 
    </div> 
    <div class="footer"> 
     ... 
    </div> 
</div> 

Dies auch in der Höhe des Bauwerks header/navbar, Inhalt und Fußzeile sind dynamisch/unbekannt.

https://www.codeply.com/go/QJogUAHIyg