Bagaimana untuk Mencipta Pengepala Melekit dengan CSS dan JavaScript Tanpa jQuery?

Membetulkan Pengepala pada Tatal

Apabila mencipta pengepala yang kekal kelihatan walaupun menatal, adalah mungkin untuk melaksanakan tingkah laku ini menggunakan CSS dan HTML sahaja tanpa memerlukan jQuery.

Penyelesaian CSS dan HTML

Perkenalkan kelas pengepala melekat:

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

Dalam HTML anda, tambahkan div dengan kelas "melekit":

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

JavaScript untuk Acara Tatal

Untuk kawalan tepat ke atas penetapan pengepala, JavaScript diperlukan untuk acara tatal:

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

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

Contoh Lanjutan

Untuk menentukan titik penetapan berdasarkan kedudukan elemen melekit pada skrin, gunakan offset().atas:

<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>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Pengepala Melekit dengan CSS dan JavaScript Tanpa jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!