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

Susan Sarandon
Lepaskan: 2024-10-31 03:20:31
asal
848 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!

sumber:php.cn
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!