如何使用 jQuery 在使用者到達特定元素時觸發事件？

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

在網頁設計中，當使用者捲動到特定元素時觸發事件非常有用在一頁上。例如，您可能希望在使用者到達某個點時顯示通知或啟動動畫。

問題：

考慮一個位置較遠的h1 元素向下翻頁：

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

您想要在使用者捲動到此h1 元素或在該h1 元素視圖內時觸發警報或執行其他操作。

解決方案：

這個問題的解決方案在於利用 jQuery 的滾動事件併計算元素相對於瀏覽器視口的偏移量和可見性。以下是逐步示範：

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

這段程式碼片段：

1. 計算h1 的偏移量： 它決定了h1 之間的距離h1 元素的頂部和視窗的頂部。
2. 決定 h1 的高度：計算 h1 元素的高度。
3. 擷取視窗的高度：計算瀏覽器視窗的高度。
4. 取得目前捲動位置：捕捉頁面目前的垂直捲動位置。
5. 比較偏移量和滾動位置：它檢查當前滾動位置是否在 h1 元素頂部和底部的範圍內，同時考慮元素和視口的高度。
6. 觸發事件：當滿足條件時，表示 h1 元素在視圖中，它會執行所需的操作，例如顯示警報或呼叫動畫。

替代實作：

您可以使用此方法在 h1 元素變得可見時淡入它，而不是顯示警報：

<code class="javascript">$('#scroll-to').fadeIn();</code>

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