Bagaimana untuk Mencipta Tajuk Tetap Yang Tatal dengan HTML, CSS dan jQuery?-tutorial css-php.cn

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

Susan Sarandon

Lepaskan： 2024-10-31 03:20:31

asal

912 orang telah melayarinya

How to Create a Fixed Header That Scrolls with HTML, CSS, and 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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!