Wie ändere ich die Farbe der Navigationsleiste beim Scrollen dynamisch?

Dynamischer Farbwechsel der Navigationsleiste beim Scrollen

Um zunächst eine Navigationsleiste ohne Hintergrundfarbe zu erhalten und ihre Farbe nach dem Scrollen schrittweise zu ändern, ist eine Kombination aus JavaScript erforderlich und CSS Änderungen.

JavaScript:

$(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

Dieser Code prüft die vertikale Scrollposition des Dokuments. Wenn es die Höhe der Navigationsleiste überschreitet, wird eine Klasse zum Navigationsleistenelement „gescrollt“.

CSS:

.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

Dieser CSS-Code definiert das Erscheinungsbild der Navigationsleiste mit der Klasse „gescrollt“. Es wendet eine weiße Hintergrundfarbe und einen sanften Übergangseffekt an, während die Farbe geändert wird.

Implementierung:

Durch Hinzufügen des bereitgestellten JavaScript-Codes zum Kopf Ihres HTML-Dokuments und Wenn Sie den CSS-Code in Ihr Stylesheet einfügen, können Sie diese dynamische Farbänderung der Navigationsleiste problemlos implementieren. Wenn der Benutzer auf der Seite nach unten scrollt, wechselt die Navigationsleiste allmählich zur gewünschten Hintergrundfarbe.

Referenz:

Eine Live-Demonstration finden Sie in der folgenden JSFiddle: [JSFiddle](https://jsfiddle.net/qe9L725y/).

Das obige ist der detaillierte Inhalt vonWie ändere ich die Farbe der Navigationsleiste beim Scrollen dynamisch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!