Wie erstelle ich mit CSS und JavaScript einen festen Header beim Scrollen?

Erstellen eines festen Headers beim Scrollen mit CSS und JavaScript

In diesem Szenario wollen wir einen Header erstellen, der fixiert wird und in bleibt Platz, wenn über einen bestimmten Punkt hinaus gescrollt wird.

CSS- und HTML-Ansatz

Die alleinige Verwendung von CSS und HTML reicht nicht aus, um diese Funktionalität zu erreichen. CSS allein bietet keine Lösung zum Anhängen eines Elements an eine bestimmte Scroll-Position.

JavaScript-Integration

Um einen Header beim Scrollen zu fixieren, ist JavaScript für die Ereignisbehandlung erforderlich . Die folgenden Schritte skizzieren die Lösung:

1. Feste Positionsklasse definieren:

   <code class="css">.fixed {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
   }</code>

2. Zuweisen die Klasse beim Scrollen:

   <code class="javascript">$(window).scroll(function() {
       var sticky = $('.sticky'),
           scroll = $(window).scrollTop();
   
       if (scroll >= 100) {
           sticky.addClass('fixed');
       } else {
           sticky.removeClass('fixed');
       }
   });</code>

   Hier wird, wenn die Scrollposition 100 Pixel überschreitet, die Klasse „fixed“ zum Element „.sticky“ hinzugefügt und es an Ort und Stelle fixiert.

Beispiel:

Der folgende HTML-Code definiert einen festen Header:

<code class="html"><div class="sticky">Header</div></code>

Demo:

[Fiddle Demo](https://jsfiddle.net/gxRC9/501/)

Erweitertes Beispiel:

Wenn der Triggerpunkt auftreten sollte Wenn das klebrige Element den oberen Bildschirmrand erreicht, können wir offset().top verwenden:

<code class="javascript">var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function() {
    var sticky = $('.sticky'),
        scroll = $(window).scrollTop();

    if (scroll >= stickyOffset) {
        sticky.addClass('fixed');
    } else {
        sticky.removeClass('fixed');
    }
});</code>

Erweiterte Demo:

[Erweiterte Fiddle-Demo]( https://jsfiddle.net/gxRC9/502/)

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS und JavaScript einen festen Header beim Scrollen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!