Heim > Web-Frontend > CSS-Tutorial > Wie ändere ich die Farbe der Navigationsleiste beim Scrollen dynamisch?

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

Linda Hamilton
Freigeben: 2024-11-28 03:04:11
Original
647 Leute haben es durchsucht

How to Dynamically Change Navigation Bar Color on Scroll?

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());
      });
    });
    Nach dem Login kopieren
  2. CSS hinzufügen, um die Navigationsleiste zu gestalten:

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

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage