Wie erstelle ich eine scrollende Navigationsleiste, die ganz oben bleibt?

Erstellen einer scrollenden Navigationsleiste, die oben bleibt

Sticky-Navigationsleiste

Sie möchten eine Navigationsleiste erstellen, die zunächst angezeigt wird unten auf der Seite. Wenn Sie nach unten scrollen, bewegt sich die Leiste weiter, bis sie den oberen Rand der Seite erreicht, und bleibt dort. Dies wird mithilfe der Klassen „navbar-fixed-bottom“ bzw. „navbar-fixed-top“ erreicht.

Beheben Ihres Codeproblems

Die Untersuchung Ihres bereitgestellten Codes zeigt Folgendes:

• Korrekte Verwendung der Navigationsleiste – behoben – Top-Klasse
• Angemessener Schatten Entfernung

Damit sich die Leiste jedoch wie gewünscht verhält, müssen Sie Folgendes tun:

• Passen Sie die Platzierung von <div> so an, dass es zunächst unten auf der Seite angezeigt wird
• Fügen Sie einen großen Rand oben oder unten zum <div> hinzu, um es nach unten zu drücken

Bedenken Sie Folgendes Folgender geänderter Code:

Verfeinertes HTML

<div>

Modifiziertes CSS

.navbar-fixed-top {
    top: 0;
    z-index: 100;
    position: fixed;
    width: 100%;
    margin-top: 800px; /* Add a sufficient margin-top to adjust the navigation bar's initial position */
}

Alternative Lösung

Wenn das Verhalten der integrierten Navigationsleiste von Bootstrap nicht stimmt Je nach Wunsch können Sie zu einer einfacheren jQuery- oder JavaScript-Implementierung wechseln:

HTML Code

   <div>

CSS-Code

/* Initially, the nav bar is absolute, positioned at the bottom */
#nav_bar {
    position: absolute;
    bottom: 0;
}

/* When the #content is scrolled 40px, the navbar changes to fixed */
#content {
    height: 3000px;  /* Increase this to match your page content length */
    scroll: auto;
}

@media screen and (max-width: 480px) {
    #content {
        height: 8000px;
    }
}

/* This makes the navbar fixed positioned at the top, until the content is fully scrolled */
.fixed-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
}

JavaScript-Code

$(window).scroll(function(){
    if ($(window).scrollTop() > 40) {
        $("#nav_bar").addClass("fixed-nav");
     } else {
         $("#nav_bar").removeClass("fixed-nav");
     }
 });
Das obige ist der detaillierte Inhalt vonWie erstelle ich eine scrollende Navigationsleiste, die ganz oben bleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!