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 zum 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, wenn die Scroll-Position überschritten wird 100 Pixel, die Klasse „fixed“ wird dem Element „.sticky“ hinzugefügt und fixiert es so.

Beispiel:

Die Der folgende HTML-Code definiert eine feste Header:

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

Demo:

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

Erweitertes Beispiel:

Wenn der Triggerpunkt auftreten soll, wenn das klebrige Element den erreicht Oben auf dem Bildschirm 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>

Extended Demo:

[Extended 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!