Wie verwenden von CSS position klebrig zu halten, eine Seitenleiste sichtbar mit Bootstrap 4

Ich habe zwei Spalten-layout wie dieses:

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

Wenn ich die position:sticky auf die sidebar-Spalte, bekomme 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 der Menü, die sich in der Seitenleiste, so dass die Verwandte Artikel Abschnitt scrollt normal und bekommt die sticky Verhalten mit der 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 der screencast das erste Beispiel das scrollen über die ganze sidebar mit einer klebrigen Verhalten, und dann ändern Sie die klebrige Eigenschaft, um das Menü, das nicht funktioniert:

Bootstrap-4 empfiehlt die sticky Eigenschaft als fiel die Unterstützung für das Anbringen jQuery-plugin:

Fiel das Affix jQuery-plugin. Wir empfehlen die Verwendung von position: sticky polyfill statt.

Habe ich es getestet in:

Firefox 47.0 mit css.sticky.enabled=“true” unter about:config
Chrome 50.0.2661.94 (64-bit) mit experimental Web Platform features aktiviert chrome://flags

(Dies ist kein Duplikat von Wie man einen sticky-sidebar im Bootstrap? da, dass man mit BS anbringen kann)

Sind Sie versuchen, so etwas wie das - codepen.io/nagasai/pen/NAXgXQ
Nein, ich will das sticky-Effekt hier beschrieben: developer.mozilla.org/en/docs/Web/CSS/position Statt der Briefe, die sidebar sollte mit einer relativen position und wechseln Sie dann zu einem fest ein.
also kein jQuery oder javascript?
Kein javascript, nur mit der nativen browser - position:sticky unterstützen.

InformationsquelleAutor marcanuy | 2016-07-14

In die stabile Bootstrap 4.0.0 release, dies geschieht mit Hilfe der sticky-top Klasse...

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>

Diese Werke auch in der Höhe des header/navbar, content und footer sind dynamische/unbekannt.

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

Sticky oben auf der Seitenleiste funktioniert, aber scheint nicht zu berücksichtigen, für das, was passiert, wenn die sidebar-Inhalte größer sind als der viewport. In diesem Szenario wird die sidebar-Inhalte können nicht gescrollt werden, in Sicht, bis der Benutzer führt einen Bildlauf an das Ende der "content" - Inhalten.

InformationsquelleAutor Zim

6

Ich löste aktivieren flexbox. Nach dem anheben ein Problem in der Bootstrap-s Github repository bekam ich eine Antwort von einer Bootstrap -Mitglied:

Den .col-xs-4 ist nicht so groß wie die .col-xs-8, so gibt es im Grunde keine
Platz für das Menü zu "schweben", wenn innerhalb der Klebrigkeit abgeht.
Machen Sie den .col-xs-4 größer und die Dinge funktionieren:
https://codepen.io/anon/pen/OXzoNJ Wenn Sie aktivieren die Flexbox-version
unsere grid-system (über $enable-flex: true;), erhalten Sie automatisch eine
equal-height-columns kostenlos, die kommt in handliches in Ihrem Fall.

InformationsquelleAutor marcanuy
1

Polyfill Erklärung.

Müssen Sie den JS-polyfill, um es zu benutzen. Die polyfills empfohlen durch den link auf der Bootstrap-Seite sind
- https://github.com/wilddeer/stickyfill
- https://github.com/filamentgroup/fixed-sticky
Hier ist eine aktualisierte codepen: https://codepen.io/anon/pen/zBpNRk

Ich enthalten die erforderlichen polyfill (ich habe stickyfill) und bezeichnet es mit
```
var stickyElements = document.getElementsByClassName('sticky');

for (var i = stickyElements.length - 1; i >= 0; i--) {
    Stickyfill.add(stickyElements[i]);
}
```
Der Bibliothek vorgeschlagen, 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 Sie die div Reihenfolge Durcheinander. Sie müssen die div mit der klebrigen Klasse außerhalb einer ganzen Reihe so füllte ich den rest der Zeile mit einem anderen <div class="col-xs-6"></div> ist leer.
- Ich bin mit Browsern unterstützt position:sticky nativ wie in der Frage.
InformationsquelleAutor wrldbt
1

Die Antwort von @wrldbt arbeitet bis zu bootstrap-4 alpha 5 alpha 6 die -xs infix wurde fallen gelassen und die Gitter sind neu geschrieben worden.

Ich etwas zusammen, ein bisschen sauberer, die Arbeit mit der aktuellen version von bootstrap & auch einen sticky footer mit flexbox.

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

InformationsquelleAutor eklundkristoffer

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.