Bagaimana untuk Mencipta Pengepala Melekit dengan CSS, HTML, dan jQuery?

Membetulkan Pengepala pada Tatal menggunakan CSS, HTML dan jQuery

Membuat pengepala yang kekal tetap apabila halaman ditatal ke bawah adalah satu keperluan reka bentuk biasa. Ini boleh dicapai menggunakan gabungan CSS, HTML dan JavaScript (jQuery).

Melaksanakan dengan CSS, HTML

CSS menyediakan kedudukan: tetap; harta, yang boleh digunakan pada elemen untuk menetapkan kedudukannya pada halaman, tanpa mengira menatal. Walau bagaimanapun, ini memerlukan titik pencetus untuk menentukan bila elemen harus diperbaiki.

Peranan JavaScript (jQuery)

JavaScript diperlukan untuk memantau acara skrol dan membuat keputusan bila hendak menggunakan kelas tetap pada elemen pengepala. Menggunakan jQuery, skrip ringkas boleh ditulis untuk mengesan acara tatal dan menambah atau mengalih keluar kelas tetap dengan sewajarnya.

Kod HTML

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

Kod CSS

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

Kod jQuery

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

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

Dalam contoh ini, kelas tetap digunakan pada elemen melekit apabila kedudukan tatal (scrollTop) melebihi 100 piksel. Anda boleh melaraskan nilai ini berdasarkan keperluan reka bentuk khusus anda.

Contoh Lanjutan: Titik Pencetus Dinamik

Jika titik pencetus untuk membetulkan elemen tidak diketahui, ia boleh ditentukan secara dinamik menggunakan offset().top.

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

Kod ini secara dinamik mengukur kedudukan menegak elemen melekit dan membetulkannya apabila ia mencapai bahagian atas port pandangan.

Dengan menggabungkan ini teknik, anda boleh membuat pengepala melekit menggunakan CSS, HTML dan jQuery.

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