Bagaimanakah saya boleh mengesan keterlihatan elemen semasa menatal dengan jQuery?

Mengesan Keterlihatan Elemen Semasa Menatal dengan jQuery

Apabila menavigasi halaman web dengan kandungan yang luas, ia menjadi penting untuk mencetuskan tindakan tertentu apabila pengguna mencapai elemen tertentu. Artikel ini menunjukkan cara menggunakan jQuery untuk mencetuskan peristiwa apabila pengguna menatal ke elemen HTML yang ditetapkan.

Menyediakan Elemen

Pertimbangkan halaman HTML dengan elemen h1 terletak jauh ke bawah:

<code class="html"><h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1></code>

Mencetuskan Acara dengan jQuery

Objektifnya adalah untuk memaparkan amaran apabila paparan penyemak imbas pengguna mencapai elemen h1. Walaupun pada mulanya seseorang mungkin cuba menggunakan kaedah tatal() pada elemen h1:

<code class="js">$('#scroll-to').scroll(function() {
    alert('you have scrolled to the h1!');
});</code>

pendekatan ini tidak akan menghasilkan hasil yang diingini. Sebaliknya, adalah perlu untuk mengira pengimbang unsur relatif kepada halaman dan membandingkannya dengan kedudukan tatal.

Penyelesaian

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

Kod di atas menyemak sama ada bahagian bawah elemen h1 telah dicapai dalam bahagian halaman yang boleh dilihat.

Peningkatan

• Demo Fiddle: Alami kefungsian secara langsung.
• FadeIn() dan bukannya Alert: Gunakan fadeIn() untuk menghidupkan keterlihatan elemen dengan lancar.
• Semak Keterlihatan Elemen: Ubah suai skrip untuk mengesan sama ada elemen berada dalam port pandangan sepenuhnya , tanpa mengira arah menatal.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengesan keterlihatan elemen semasa menatal dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!