Wie ändere ich die Hintergrundfarbe der Navigationsleiste beim Scrollen?

Ändern der Farbe der Navigationsleiste nach dem Scrollen

Frage:

Wie können Sie den Hintergrund entfernen? Wählen Sie zunächst eine Farbe aus einer Navigationsleiste aus und fügen Sie dann nach dem Scrollen eine neue Farbe hinzu auftritt?

Szenario:

Die betreffende Website, https://attafothman.olympe.in/, verfügt oben über eine schwarze Navigationsleiste, die eine feste Position beibehalten sollte Position. Wenn Sie jedoch unter eine bestimmte Div herunterscrollen, erhält die Navigationsleiste automatisch eine neue Hintergrundfarbe.

Lösung:

Um dieses Problem zu beheben, ist eine Kombination aus JavaScript und CSS erforderlich eingesetzt wird.

JavaScript:

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

Dieser JavaScript-Code Löst einen Ereignis-Listener beim Scrollen aus. Wenn die Bildlaufposition die Höhe der Navigationsleiste überschreitet, wird dem Element eine benutzerdefinierte CSS-Klasse mit dem Namen „scrolled“ hinzugefügt.

CSS:

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

Dieses CSS Die Regel definiert das Verhalten der „gescrollten“ Klasse. Dem Element mit der Klasse „navbar-fixed-top“ wird eine durchgehend weiße Hintergrundfarbe zugewiesen, sobald die Klasse „scrolled“ hinzugefügt wurde. Das Schlüsselwort „!important“ stellt sicher, dass diese Regel alle widersprüchlichen Stile außer Kraft setzt.

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