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

So ändern Sie die Farbe der Navigationsleiste beim Scrollen

Problem:

Einstellen eines transparenten Hintergrunds Die Farbe für die Navigationsleiste funktioniert nicht, wenn auf der Seite gescrollt wird, was dazu führt, dass eine neue Hintergrundfarbe entsteht angewendet.

Lösung:

Um die Farbe der Navigationsleiste nach dem Scrollen zu ändern, befolgen Sie diese Schritte:

1. Fügen Sie JavaScript hinzu Kopf:

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

2. CSS hinzufügen, um die Navigationsleiste zu gestalten:

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

Implementierung:

Der JavaScript-Code überwacht das Scrollen der Seite. Sobald der Bildlauf die Höhe der Navigationsleiste überschreitet, wird der Navigationsleiste eine Klasse mit dem Namen scrolled hinzugefügt. Der CSS-Code gestaltet die Navigationsleiste mit einer weißen Hintergrundfarbe, wenn die gescrollte Klasse vorhanden ist. Dadurch wird die Hintergrundfarbe über einen Zeitraum von 200 Millisekunden sanft verändert.

Mit dieser Lösung können Sie eine transparente Hintergrundfarbe für die Navigationsleiste festlegen, wenn nicht gescrollt wird, und die Hintergrundfarbe beim Scrollen in Weiß ändern.

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!