Wie kann ich die Hintergrundfarbe meiner Navbar beim Scrollen ändern?

Dynamischer Farbwechsel der Navigationsleiste beim Scrollen

Verbessern Sie das Navigationserlebnis Ihrer Website, indem Sie die Farbe der Navigationsleiste ändern, während Sie auf der Seite nach unten scrollen . Bei dieser Frage suchte der Benutzer nach Anleitung, zunächst die Hintergrundfarbe der Navigationsleiste zu entfernen und dann beim Scrollen über einen bestimmten Bereich hinaus eine Farbe anzuwenden.

Lösung:

Die Lösung beinhaltet eine Kombination aus JavaScript und CSS. Fügen Sie zunächst den folgenden JavaScript-Code zum Kopfbereich Ihres HTML-Dokuments hinzu:

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

Dieser JavaScript-Code überwacht die Bildlaufposition des Fensters und schaltet die „gescrollte“ Klasse in der Navigationsleiste um, wenn der Bildlauf den Navigationsbereich überschreitet. Balkenhöhe.

Fügen Sie als Nächstes den folgenden CSS-Code zu Ihrem Stylesheet hinzu:

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

Dieses CSS stellt sicher, dass, wenn die „gescrollte“ Klasse auf die Navigationsleiste angewendet wird, ihre Hintergrundfarbe mit einem sanften Übergang über 200 Millisekunden in Weiß (#fff) wechselt.

Durch die Implementierung dieser Lösung können Sie eine Dynamik erstellen Navigationsleiste, die das Benutzererlebnis verbessert, indem sie beim Scrollen durch den Seiteninhalt einen visuellen Hinweis bietet.

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