Wie erstelle ich einen festen Header, der mit HTML, CSS und jQuery scrollt?-CSS-Tutorial-php.cn

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

Susan Sarandon

Freigeben： 2024-10-31 03:20:31

Original

847 Leute haben es durchsucht

How to Create a Fixed Header That Scrolls with HTML, CSS, and jQuery?

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!