it-swarm.com.de

Bootstrap 4 mit festem oberen Navigationsbereich und fester Seitenleiste

Dies ist ein hervorragendes Beispiel für das Erstellen einer Navigationsleiste mit einer Seitenleiste. Kann jemand den Code so ändern, dass das oberste Navi oben festgelegt ist und die Seitenleiste fest/statisch ist und nur der Hauptseiteninhalt durchlaufen wird? Ich kann das Nav als oberstes Nav festlegen, indem ich der nav den class="fixed-top" zuweisen, aber ich kann nicht herausfinden, wie ich die Sidebar so fixieren kann, dass sie an derselben Stelle bleibt, anstatt mit dem Inhalt der Hauptseite nach oben zu scrollen. Das Anwenden von class="sticky-top" auf die Seitenleiste 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

7
user3691644

Der sticky-topis funktioniert, scheint aber aus zwei Gründen nicht zu funktionieren ...

  1. Im Hauptinhaltsbereich ist nicht genügend Inhalt zum Scrollen vorhanden
  2. Es befindet sich auf top:0 und versteckt sich hinter der festen Navigationsleiste

Fügen Sie CSS hinzu, um den oberen Rand der Seitenleiste zu versetzen (entspricht der Höhe der festen Navigationsleiste).

.sticky-offset {
    top: 56px;
}

<ul class="list-group sticky-top sticky-offset">..(sidebar)..</div>

Fügen Sie dann im Hauptbereich genügend Inhalt (oder Höhe) hinzu, sodass ein Bildlauf erforderlich ist ...

Arbeitsdemo:https://www.codeply.com/go/7XYosZ7VH5

<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
    ..
</nav>
<div class="row">
    <div id="sidebar-container" class="sidebar-expanded col-2 d-none d-md-block">
        <ul class="list-group sticky-top sticky-offset">
            <li>Menu item..</li>
            <li>Menu item..</li>
        </ul>
    </div>
    <div class="col">
        <!-- MAIN -->
    </div>
</div>
11
Zim

Es gibt eine relativ neue CSS-Positionseigenschaft namens sticky

position: sticky;
top: 4em;

Sehen Sie, wie das funktioniert und was passiert, wenn Sie bis zum Ende des übergeordneten Elements blättern. Lassen Sie die Höhe bei auto. Referenz - https://developer.mozilla.org/en-US/docs/Web/CSS/position

0
mate.gwozdz