Das Fixieren eines Headers beim Scrollen mit CSS, HTML und jQuery

Das Erstellen eines Headers, der beim Scrollen der Seite nach unten fixiert bleibt, ist eine gemeinsame Designanforderung. Dies kann durch eine Kombination aus CSS, HTML und JavaScript (jQuery) erreicht werden.

Implementierung mit CSS, HTML

CSS liefert die Position: behoben; Eigenschaft, die auf ein Element angewendet werden kann, um seine Position auf der Seite unabhängig vom Scrollen festzulegen. Dies erfordert jedoch einen Triggerpunkt, um zu bestimmen, wann das Element fixiert werden soll.

Rolle von JavaScript (jQuery)

JavaScript wird benötigt, um das Scroll-Ereignis zu überwachen und zu entscheiden wann die feste Klasse auf das Header-Element angewendet werden soll. Mit jQuery kann ein einfaches Skript geschrieben werden, um Scroll-Ereignisse zu erkennen und die feste Klasse entsprechend hinzuzufügen oder zu entfernen.

HTML-Code

CSS-Code

.fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
}

jQuery-Code

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

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

In diesem Beispiel wird die feste Klasse auf das Sticky-Element angewendet, wenn die Bildlaufposition (scrollTop) 100 Pixel überschreitet. Sie können diesen Wert basierend auf Ihren spezifischen Designanforderungen anpassen.

Erweitertes Beispiel: Dynamischer Triggerpunkt

Wenn der Triggerpunkt für die Fixierung des Elements unbekannt ist, kann dies der Fall sein dynamisch bestimmt mit offset().top.

var stickyOffset = $('.sticky').offset().top;

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

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

Dieser Code misst dynamisch die vertikale Position des Sticky-Elements und fixiert es, wenn es den oberen Rand des Ansichtsfensters erreicht.

Durch die Kombination dieser Techniken können Sie einen Sticky-Header erstellen mit CSS, HTML und jQuery.