如何在 jQuery 中滾動到特定元素時觸發事件？

使用jQuery 到達特定元素時觸發事件

問題

使用者希望在向下捲動網頁並到達時顯示警報訊息特定的h1 元素。他們嘗試使用scroll()事件，但沒有成功。

解決方案

要確定 h1 元素何時進入瀏覽器視圖，我們需要計算它相對於頂部的偏移量並進行比較它與當前的滾動值。這是修改後的程式碼：

<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) && wS < hT && wS+wH > hT+hH){
       console.log('H1 on the view!'); // or trigger any desired event
   }
});</code>

增強

• 示範小提琴：沒有警報的即時範例，而是在 h1 元素中淡入淡出。
• 更新的程式碼：現在檢查元素是否在視口內，無論滾動方向如何。
• 更新的示範小提琴：顯示更新程式碼的功能.

以上是如何在 jQuery 中滾動到特定元素時觸發事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！