Bagaimana untuk Mencetuskan Peristiwa Apabila Pengguna Mencapai Elemen Tertentu Menggunakan 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!