Jak używać pozycji CSS lepki utrzymać bocznym widoczne z Bootstrap 4

Question

Mam dwie kolumny układ tak:

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

Jeżeli ustawić position:sticky do słupa bocznego, pojawia się lepki zachowanie tego Pasek boczny: 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> 

Ale kiedy ustawić właściwość sticky tylko do menu, który znajduje się na pasku bocznym, tak powiązane artykuły z sekcja przewija normalnie i dostaje lepką zachowanie z div menu, to nie działa:

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

to screencast pierwszego przykładu przewijanie cały pasek boczny z lepkiej zachowań, a następnie zmianę właściwości lepkie do menu że nie działa:

Bootstrap 4 recommendslepki nieruchomość jako spadło poparcie dla wtyczki Nakleić jQuery:

Wypada wtyczki Nakleić jQuery. Zalecamy użycie pozycji: zamiast tego klejąca się polyfill.

I testowano je w:

• Firefox 47,0 z css.sticky.enabled=“true” pod about:config

• Chrome 50.0.2661.94 (64-bitowa) z experimental Web Platform features aktywowany w chrome://flags

(To nie jest duplikat How to make a sticky sidebar in Bootstrap? bec ause że jeden jest przy użyciu BS umieszczają)

Answer 1

Rozwiązałem włączanie flexbox. Po podniesieniu problem w Github repozytorium Bootstrap za Dostałem odpowiedź przez Bootstrap member:

.col-XS-4 nie jest tak wysoki jak .col-XS-8, więc nie ma w zasadzie żadnego przestrzeń aby Menu "unosiło się" w momencie, gdy zaczyna się lepkość. Spraw, aby plik .col-xs-4 był wyższy i wszystko działało poprawnie: https://codepen.io/anon/pen/OXzoNJ Jeśli włączysz wersję Flexbox naszego systemu siatki (przez $ enable-flex: true ;), otrzymujesz automatyczne kolumny o tej samej wysokości za darmo, co jest przydatne w twoim przypadku.

Answer 2

Polyfill explanation.

Trzeba obejmują PolyFill JS, aby ją wykorzystać.W polyfills polecane przez link na stronie Bootstrap są

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

Oto zaktualizowana codepen: https://codepen.io/anon/pen/zBpNRk

włączyłem wymaganą PolyFill (użyłem stickyfill) i zadzwonił pod numer

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

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

Biblioteka sugeruje użyć tego do css

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

i wreszcie trzeba było kolejność div zmieszany górę. Musisz umieścić div z lepką klasą poza całym rzędem, więc wypełniłem resztę wiersza innym <div class="col-xs-6"></div>, który jest pusty.

Answer 3

Odpowiedź przez @wrldbt działa do bootstrap 4a 5, ale w alfa 6 został upuszczony -xs infix i siatka zostały przerobione.

Połączyłem coś, nieco czystsze, działając z aktualną wersją bootstrapu & również zawierał lepkie stopki za pomocą Flexbox.

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

Answer 4

w stajni Bootstrap 4.0.0 wydaniu, odbywa się to przy użyciu klasy sticky-top ...

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> 

Działa to nawet w wysokości nagłówek/navbar, treść i stopka są dynamiczne/nieznane.

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