Bagaimana untuk Mencetuskan Peristiwa Apabila Pengguna Menatal ke Elemen Tertentu dengan jQuery?

Cetuskan Peristiwa Apabila Pengguna Menatal ke Elemen Tertentu dengan jQuery

Dalam pembangunan web, selalunya perlu mencetuskan acara apabila pengguna tatal ke elemen tertentu pada halaman. Ini boleh berguna untuk mendedahkan atau mengemas kini kandungan, mencetuskan animasi atau memaparkan pemberitahuan.

Untuk mencapai ini dengan jQuery, anda boleh menggunakan acara tatal pada objek tetingkap. Walau bagaimanapun, hanya menggunakan $('#scroll-to').scroll() tidak mencukupi, kerana acara skrol hanya dicetuskan untuk elemen yang kelihatan pada halaman pada masa ini.

Sebaliknya, anda boleh memanfaatkan jQuery's offset() berfungsi untuk menentukan kedudukan elemen berbanding tetingkap, serta fungsi outerHeight() untuk mendapatkan ketinggiannya. Dengan membandingkan nilai ini dengan ketinggian tetingkap dan nilai scrollTop, anda boleh menentukan sama ada elemen itu berada dalam paparan pengguna pada masa ini.

Sebagai contoh, kod berikut mengira offset dan ketinggian elemen #scroll-to h1 dan kemudian membandingkannya dengan kedudukan tatal tetingkap:

$(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 is in the viewport!');
  }
});

Pendekatan ini membolehkan anda mencetuskan acara apabila elemen h1 menatal ke dalam paparan pengguna, tanpa mengira kedudukannya pada halaman. Anda boleh menyesuaikan kod ini untuk melakukan sebarang tindakan yang diingini apabila elemen yang ditentukan kelihatan.

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