Bagaimana untuk Mencipta Pengepala Tetap pada Tatal Menggunakan CSS dan JavaScript?

Mencipta Pengepala Tetap pada Tatal Menggunakan CSS dan JavaScript

Dalam senario ini, kami menyasarkan untuk mencipta pengepala yang menjadi tetap dan kekal dalam letak apabila ditatal melepasi titik tertentu.

Pendekatan CSS dan HTML

Menggunakan CSS dan HTML sahaja tidak mencukupi untuk mencapai fungsi ini. CSS sahaja tidak menyediakan penyelesaian untuk melampirkan elemen pada kedudukan tatal tertentu.

Pengintegrasian JavaScript

Untuk membetulkan pengepala pada tatal, JavaScript diperlukan untuk pengendalian acara . Langkah berikut menggariskan penyelesaian:

1. Tentukan Kelas Kedudukan Tetap:

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

2. Tugaskan Kelas pada Tatal:

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

   Di sini, apabila kedudukan tatal melebihi 100 piksel, kelas 'tetap' ditambahkan pada elemen '.sticky', membetulkannya pada tempatnya.

Contoh:

Kod HTML berikut mentakrifkan pengepala tetap:

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

Demo:

[Demo Fiddle](https://jsfiddle.net/gxRC9/501/)

Contoh Lanjutan:

Jika titik pencetus sepatutnya berlaku apabila elemen melekit mencapai bahagian atas skrin, kita boleh 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>

Demo Lanjutan:

[Demo Fiddle Lanjutan]( https://jsfiddle.net/gxRC9/502/)

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Pengepala Tetap pada Tatal Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!