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

Patricia Arquette
Lepaskan: 2024-10-31 09:47:02
asal
728 orang telah melayarinya

How to Trigger an Event When a Specific Element Enters the User's Viewport using 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>
Salin selepas log masuk

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!

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