Wie erstelle ich eine Sticky-Navigationsleiste, die beim Scrollen oben angehängt wird?

Erstellen einer Sticky-Navigationsleiste, die beim Scrollen oben angebracht wird

Problem:

Entwerfen Sie eine Navigationsleiste, die am unteren Rand der sichtbaren Seite positioniert wird anfänglich. Wenn ein Benutzer nach unten scrollt, steigt die Navigationsleiste nach oben, bis sie oben auf der Seite fixiert ist.

Lösung:

Die Lösung besteht darin, jQuery und JavaScript zu verwenden, um die Position der Navigationsleiste basierend auf dem zu ändern scrollen Position.

Implementierung:

1. HTML:

   <div>

2. CSS:

   #banner {
     height: 273px;
   }
   
   #nav_bar {
     height: 30px;
   }
   
   $(document).ready(function() {
     $(window).scroll(function () {
       if ($(window).scrollTop() > 550) {
         $('#nav_bar').addClass('navbar-fixed-top');
       }
       if ($(window).scrollTop() < 551) {
         $('#nav_bar').removeClass('navbar-fixed-top');
       }
     });
   });

Weitere Hinweise:

• Passen Sie die Werte im JavaScript (550 und 551) an, um sie an die genaue Bildlaufposition anzupassen, an der die Navigationsleiste fixiert werden soll.
• Diese Lösung kann auf andere Elemente angewendet werden müssen an einer bestimmten Bildlaufposition fixiert bleiben.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Sticky-Navigationsleiste, die beim Scrollen oben angehängt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!