Wie erstelle ich einen festen Header, der mit HTML, CSS und jQuery scrollt?

Erstellen eines festen Scroll-Headers mit HTML, CSS und jQuery

Die Verbesserung der Website-Funktionalität erfordert oft die Erstellung von Elementen, die sich basierend auf dynamisch verhalten Benutzerinteraktionen, wie etwa Kopfzeilen, die beim Scrollen auf dem Bildschirm fixiert bleiben. Auch wenn Sie anfangs möglicherweise darüber nachgedacht haben, diesen Effekt ausschließlich mit CSS und HTML zu erstellen, ist die Leistungsfähigkeit von JavaScript erforderlich, um Scroll-Ereignisse zu überwachen und die entsprechenden Änderungen umzusetzen.

Um dies zu erreichen, gehen wir Schritt für Schritt vor Lösung:

1. Fügen Sie dem HTML einen Sticky Container hinzu:

Erstellen Sie ein

mit der Klasse „sticky“, die als fester Header-Container dient.

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

2. Gestalten Sie die feste Position:

Definieren Sie den Stil für den festen Header mit einer „festen“ Klasse, die seine Position und Abmessungen anpasst.

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

3. Implementieren Sie die Scroll-Ereignisbehandlung mit jQuery:

Verwenden Sie das Scroll-Ereignis von jQuery, um das Scrollverhalten des Benutzers zu überwachen. Fügen Sie basierend auf der Bildlaufposition die Klasse „fixed“ zum Element „sticky“ hinzu oder entfernen Sie sie.

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

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

Beispiel: http://jsfiddle.net/gxRC9/501/

Darüber hinaus kann es vorkommen, dass der Auslösepunkt dort liegen muss, wo das klebrige Element den oberen Bildschirmrand erreicht. Nutzen Sie in solchen Fällen die Methode offset().top, um die Position des Sticky-Elements zu bestimmen und die Verarbeitung des Scroll-Ereignisses entsprechend zu ändern.

<code class="jquery">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>

Erweitertes Beispiel: http://jsfiddle. net/gxRC9/502/

Mit diesen kombinierten Techniken verleihen Sie Ihren Headern die Möglichkeit, sich beim Scrollen selbst zu fixieren, und verbessern so das Benutzererlebnis Ihrer Website mit minimalem Code und maximaler Wirkung.

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

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn