Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Mencetuskan Peristiwa Apabila Pengguna Mencapai Elemen Tertentu Menggunakan jQuery?

Bagaimana untuk Mencetuskan Peristiwa Apabila Pengguna Mencapai Elemen Tertentu Menggunakan jQuery?

Patricia Arquette
Patricia Arquetteasal
2024-10-31 01:39:29771semak imbas

How to Trigger Events When Users Reach Specific Elements Using jQuery?

Mencetuskan Peristiwa Apabila Pengguna Mencapai Elemen Tertentu dengan jQuery

Dalam reka bentuk web, ia boleh berguna untuk mencetuskan peristiwa apabila pengguna menatal ke elemen tertentu pada halaman. Sebagai contoh, anda mungkin mahu memaparkan pemberitahuan atau mengaktifkan animasi apabila pengguna mencapai titik tertentu.

Masalah:

Pertimbangkan elemen h1 yang terletak jauh ke bawah halaman:

<code class="html"><h1>TRIGGER EVENT WHEN SCROLLED TO.</h1></code>

Anda mahu mencetuskan makluman atau melakukan tindakan lain apabila pengguna menatal ke atau dalam paparan elemen h1 ini.

Penyelesaian:

Penyelesaian kepada masalah ini terletak pada penggunaan acara skrol jQuery dan mengira offset dan keterlihatan elemen berbanding dengan port pandangan penyemak imbas. Berikut ialah demonstrasi langkah demi langkah:

<code class="javascript">$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
       console.log('H1 on the view!');
   }
});</code>

Coretan kod ini:

  1. Mengira Offset h1: Ia menentukan jarak antara bahagian atas elemen h1 dan bahagian atas port pandangan.
  2. Menentukan Ketinggian h1: Ia mengira ketinggian elemen h1.
  3. Mendapatkan semula Ketinggian Port Pandangan: Ia mengira ketinggian port pandangan penyemak imbas.
  4. Mendapat Kedudukan Tatal Semasa: Ia menangkap kedudukan tatal menegak semasa halaman.
  5. Membandingkan Kedudukan Offset dan Tatal: Ia menyemak sama ada kedudukan skrol semasa berada dalam julat bahagian atas dan bawah elemen h1, dengan mengambil kira ketinggian kedua-dua elemen dan port pandangan.
  6. Pencetuskan Peristiwa: Apabila syarat dipenuhi, menunjukkan bahawa elemen h1 sedang dilihat, ia melakukan tindakan yang diingini, seperti memaparkan amaran atau menggunakan animasi.

Pelaksanaan Alternatif:

Daripada memaparkan amaran, anda boleh menggunakan pendekatan ini untuk memudar dalam elemen h1 apabila ia kelihatan:

<code class="javascript">$('#scroll-to').fadeIn();</code>

Atas ialah kandungan terperinci Bagaimana untuk Mencetuskan Peristiwa Apabila Pengguna Mencapai Elemen Tertentu Menggunakan jQuery?. 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