Wie verwende ich CSS Position Sticky, um eine Seitenleiste mit Bootstrap 4 sichtbar zu halten?

Ich habe ein zweispaltiges Layout wie dieses:

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

Wenn ich das @ einstelposition:sticky in der Sidebar-Spalte erhalte ich das Sticky-Verhalten der Sidebar:https: //codepen.io/marcanuy/pen/YWYZE

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 das @ setsticky Eigentumnu zumSpeisekart das befindet sich in der Seitenleiste, so dass dieIn Verbindung stehende Artikeer Abschnitt @ scrollt normal und erhält dasklebri Verhalten mit demmenu 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 des ersten Beispiels, in dem die gesamte Seitenleiste mit einem klebrigen Verhalten gescrollt wird und anschließend die Eigenschaft sticky in das Menü geändert wird, das nicht funktioniert:

Bootstrap 4 empfiehlt dasklebri -Eigenschaft als gelöschte Unterstützung für das Affix jQuery-Plugin:

Das Affix jQuery-Plugin wurde gelöscht. Wir empfehlen die Verwendung einer Position: stattdessen klebrige Polyfüllung.

Ich habe es getestet in:

Firefox 47.0 mitcss.sticky.enabled=“true” unterabout:config

Chrome 50.0.2661.94 (64-Bit) mitexperimental Web Platform features aktiviert inchrome://flags

(Dies ist kein Duplikat vonWie erstelle ich eine klebrige Seitenleiste in Bootstrap? weil dieser BS-Affix verwendet)

Antworten auf die Frage(8)

Ihre Antwort auf die Frage