Bagaimana untuk Mencipta Tajuk Tetap Yang Tatal dengan HTML, CSS dan jQuery?

Mencipta Tatal Tetap Pengepala dengan HTML, CSS dan jQuery

Meningkatkan fungsi tapak web selalunya memerlukan penciptaan elemen yang berkelakuan dinamik berdasarkan interaksi pengguna, seperti pengepala yang kekal pada skrin semasa menatal. Walaupun anda mungkin pada mulanya mempertimbangkan untuk mencipta kesan ini semata-mata menggunakan CSS dan HTML, ia memerlukan kuasa JavaScript untuk memantau acara tatal dan melaksanakan perubahan yang sesuai.

Untuk mencapai ini, kami memulakan langkah demi langkah penyelesaian:

1. Tambahkan Bekas Melekit pada HTML:

Buat

dengan kelas "melekit" untuk berfungsi sebagai bekas pengepala tetap.

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

2. Gayakan Kedudukan Tetap:

Tentukan penggayaan untuk pengepala tetap dengan kelas "tetap" yang melaraskan kedudukan dan dimensinya.

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

3. Laksanakan Pengendalian Acara Tatal dengan jQuery:

Gunakan acara tatal jQuery untuk memantau gelagat tatal pengguna. Berdasarkan kedudukan tatal, tambah atau alih keluar kelas "tetap" pada elemen "melekit".

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

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

Contoh: http://jsfiddle.net/gxRC9/501/

Selain itu, anda mungkin menghadapi senario di mana titik pencetus perlu berada apabila elemen melekit mencapai bahagian atas skrin. Dalam kes sedemikian, gunakan kaedah offset().top untuk menentukan kedudukan elemen melekit dan ubah suai pengendalian acara tatal dengan sewajarnya.

<code class="jquery">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 Lanjutan: http://jsfiddle. net/gxRC9/502/

Dengan gabungan teknik ini, anda memperkasakan pengepala anda dengan keupayaan untuk membaiki diri mereka sendiri semasa menatal, meningkatkan pengalaman pengguna tapak web anda dengan kod minimum dan impak maksimum.

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

Kenyataan Laman Web ini

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