Bagaimana untuk Mencetuskan Peristiwa Apabila Elemen Tertentu Memasuki Port Pandangan Pengguna menggunakan jQuery?

Mencetuskan Peristiwa Apabila Pengguna Menatal ke Elemen Tertentu dengan jQuery

Dalam senario ini, anda ingin memaparkan amaran apabila sesuatu elemen h1 (dengan ID "scroll-to") memasuki paparan penyemak imbas pengguna. Untuk mencapai ini, kirakan offset elemen dari bahagian atas halaman dan bandingkan dengan kedudukan skrol semasa:

<code class="javascript">$(window).scroll(function() {
    var elementOffsetTop = $('#scroll-to').offset().top;
    var elementHeight = $('#scroll-to').outerHeight();
    var windowHeight = $(window).height();
    var scrollTop = $(this).scrollTop();

    if (scrollTop > (elementOffsetTop + elementHeight - windowHeight)) {
        console.log('H1 on the view!');
    }
});</code>

Dalam kod di atas:

• offset(). atas mengembalikan jarak dari bahagian atas dokumen ke bahagian atas elemen.
• outerHeight() mengembalikan ketinggian elemen termasuk pelapik dan sempadan.
• Kami menyemak sama ada kedudukan tatal lebih besar daripada mengimbangi elemen tolak ketinggiannya dan ketinggian tetingkap untuk memastikan ia kelihatan dalam port pandangan semasa.

Anda juga boleh mengubah suai acara untuk melakukan tindakan lain seperti pudar dalam elemen apabila ia memasuki port pandangan:

Atas ialah kandungan terperinci Bagaimana untuk Mencetuskan Peristiwa Apabila Elemen Tertentu Memasuki Port Pandangan Pengguna menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!