Bagaimana untuk Membuat Pengepala Melekat di Bahagian Atas Halaman dengan CSS dan JavaScript?

Cara Membuat Pengepala Melekit menggunakan CSS dan JavaScript

Masalah:

Reka bentuk pengepala yang kekal apabila pengguna menatal melepasi titik tertentu pada halaman. Adakah mungkin untuk mencapai ini dengan CSS dan HTML, atau adakah JavaScript diperlukan?

Penyelesaian Menggunakan CSS dan JavaScript:

Untuk mencipta pengepala melekit menggunakan CSS dan JavaScript, ikut langkah berikut:

1. HTML: Tambahkan
   elemen dengan kelas "melekit" pada halaman yang anda mahu pengepala dipaparkan.

2. CSS: Takrifkan kelas CSS bernama "tetap" dengan sifat berikut:

   • kedudukan: tetap;
   • atas: 0;
   • kiri: 0;
   • lebar: 100%;

3. JavaScript (jQuery): Gunakan kod JavaScript berikut untuk melampirkan pengendali acara skrol pada objek tetingkap:

   <code class="js">$(window).scroll(function() {
     var sticky = $('.sticky'),
         scroll = $(window).scrollTop();
   
     if (scroll >= 100) {
       sticky.addClass('fixed');
     } else {
       sticky.removeClass('fixed');
     }
   });</code>

Contoh Lanjutan:

Jika titik pencetus untuk pengepala melekit tidak diketahui, anda boleh menggunakan kaedah .offset().top untuk menentukan apabila elemen melekit mencapai bahagian atas skrin . Berikut ialah kod JavaScript yang dikemas kini:

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

Contoh Fiddles:

• Contoh asas: http://jsfiddle.net/gxRC9/501/
• Contoh lanjutan: http://jsfiddle.net/gxRC9/502/

Pendekatan ini membolehkan anda mencipta pengepala melekit menggunakan gabungan CSS dan JavaScript, menjadikannya penyemak imbas silang serasi dan agak mudah untuk dilaksanakan.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Pengepala Melekat di Bahagian Atas Halaman dengan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!