Rumah >hujung hadapan web >tutorial js >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:
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!