Bootstrap-4 Feste Spitze nav und Feste Seitenleiste
Dies ist ein großartiges Beispiel dafür, wie man erstellen Sie eine Navigationsleiste mit einer sidebar. Kann mir jemand den code ändern, so dass die top-nav ist oben fixiert und der sidebar Feste/statische nur mit dem Inhalt der Hauptseite scrollen? Ich kann das nav das nav-top-behoben durch die Zuordnung der class="fixed-top"
zu den nav
, aber ich kann nicht herausfinden, wie man die sidebar fixiert, so dass es bleibt an der gleichen Stelle anstelle von Bildlauf mit dem Inhalt der Hauptseite. Die Anwendung class="sticky-top"
in der sidebar scheint nicht zu funktionieren.
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
..
</nav>
<div class="row">
<div id="sidebar-container" class="sidebar-expanded d-none d-md-block">
<ul class="list-group sticky-top">
<li>Menu item..</li>
<li>Menu item..</li>
</ul>
</div>
<div class="col">
<!-- MAIN -->
</div>
</div>
https://www.codeply.com/go/LFd2SEMECH
InformationsquelleAutor user3691644 | 2018-04-04
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den
sticky-top
ist arbeiten, aber es scheint nicht zu funktionieren, aus zwei Gründen...top:0
so verbirgt Sie sich hinter der fixed navbarHinzufügen von CSS-offset oben in der Navigationsleiste (die gleiche wie die Höhe der festen Navigationsleiste).
Und fügen Sie dann genug content (oder Höhe) in der main-Gebiet, so dass scrollen notwendig ist...
Arbeiten Demo: https://www.codeply.com/go/7XYosZ7VH5
sidebar-container
element, und fehlte das sticky-offset, wie Sie vorgeschlagen.Ich denke, eine schöne Sache zu decken, wäre in diesem Beispiel die Herstellung der festen sidebar Scrollbar, wenn der Inhalt höher ist als die verfügbare Höhe des Bildschirms. Von was ich sehen kann, in diesem Beispiel funktioniert es nicht richtig, in solchen Bedingungen. Der rest ist wirklich schön.
InformationsquelleAutor Zim
Gibt es eine relativ neue CSS-Eigenschaft position genannt
sticky
.Sehen, wie das funktioniert, was passiert, wenn Sie einen Bildlauf zum Ende des übergeordneten Elements. Lassen Sie die Höhe am
auto
. Referenz - https://developer.mozilla.org/en-US/docs/Web/CSS/positionInformationsquelleAutor mate.gwozdz