Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

DDD
Freigeben: 2024-10-31 11:38:01
Original
226 Leute haben es durchsucht

How to Create a Sticky Header with CSS and JavaScript Without 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>
Nach dem Login kopieren

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

<code class="html"><div class="sticky"></div></code>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!