webentwicklung-frage-antwort-db.com.de

Bootstrap 4, Navigationsleiste mit festem Verdeck und andere Sticky-Top-Elemente

Hier die Reproduktion: https://jsbin.com/lawafu/edit?html,output

Ist das ein Bug? Ein Fehler? Ein Problem? Eine nicht realisierbare Idee?

Vor dem Blättern:  before

Nach dem Scrollen:  after

Was ich brauche :

Offensichtlich muss ich die Seitenleiste sehen, wenn ich die Seite nach unten scrolle, wobei ich für die Navigationsleiste mit fester Oberseite die Polsterung oben am Körper verwende.

Ich benutze diesen Code für die Seitenleiste:

<div class="sticky-top">
  <ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
htmlcsstwitter-bootstrapbootstrap-4sticky
7
user4412054

Bootstrap sticky-top hat keinen Offset für die Navbar, da top:0. Sie können eine benutzerdefinierte Klasse hinzufügen, um die Höhe der Navigationsleiste zu berücksichtigen.

.sticky-offset {
    top: 56px;
}

<div class="sticky-top sticky-offset">
  <ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Demo: https://www.codeply.com/go/QeJOvbYswd

Siehe auch: Bootstrap 4 Fixed Top Nav und Fixed Sidebar

22
Zim

Die Antwort von Zim war hilfreich, hat aber in Safari 12.0.1 unter MacOS nicht funktioniert (Chrome 70 war in Ordnung, hat wie erwartet funktioniert).

Ich denke, das liegt daran, dass Sticky-Top einen Top: 0px-Wert hat, der Priorität vor der hinzugefügten benutzerdefinierten Klasse hat.

Also habe ich stattdessen einfach hinzugefügt:

.sticky-top{
  top:56px;
}

Was es auch in Safari behoben hat. Außerdem muss die benutzerdefinierte Klasse nicht zum div hinzugefügt werden.

1
dcsilver