Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Membuat Pengepala Melekat di Bahagian Atas Halaman dengan CSS dan JavaScript?

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

Susan Sarandon
Susan Sarandonasal
2024-10-28 18:50:29321semak imbas

How to Make a Header Stick to the Top of the Page with CSS and 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn