Wie erstelle ich einen Sticky Header mit CSS und JavaScript ohne jQuery?

Header beim Scrollen korrigieren

Wenn Sie einen Header erstellen, der trotz Scrollen sichtbar bleibt, ist es möglich, dieses Verhalten allein mit CSS und HTML zu implementieren, ohne dass jQuery erforderlich ist.

CSS- und HTML-Lösung

Führen Sie eine Sticky-Header-Klasse ein:

<code class="css">.sticky-header {
  width: 700px;
  height: 50px;
  background: orange;
  position: fixed;
}</code>

Fügen Sie in Ihrem HTML ein Div mit der „Sticky“-Klasse hinzu:

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

JavaScript für Scroll-Ereignisse

Zur genauen Kontrolle über die Fixierung des Headers ist JavaScript für Scroll-Ereignisse erforderlich:

<code class="javascript">$(window).scroll(function() {
  var sticky = $('.sticky'),
    scroll = $(window).scrollTop();

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

Erweitertes Beispiel

Um den Fixierungspunkt zu bestimmen Verwenden Sie basierend auf der Position des Sticky-Elements auf dem Bildschirm offset().top:

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

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

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

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