如何使用 jQuery 檢測滾動期間元素的可見性？

使用 jQuery 滾動期間檢測元素可見性

導航包含大量內容的網頁時，當用戶到達特定元素時觸發特定操作變得至關重要。本文示範如何使用 jQuery 在使用者捲動到指定的 HTML 元素時觸發事件。

設定元素

考慮一個HTML 頁面，其中h1 元素位於最下方：

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

使用jQuery 觸發事件

目標是當使用者的瀏覽器視圖到達h1 元素時顯示警報。雖然人們最初可能會嘗試在 h1 元素上使用 scroll() 方法：

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

這種方法不會產生所需的結果。相反，需要計算元素相對於頁面的偏移量，並將其與滾動位置進行比較。

解

<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>

上面的程式碼檢查 h1 元素的底部是否已達到頁面可見部分。

增強功能

• 示範小提琴：親身體驗功能。
• FadeIn() 而不是 Alert： 使用 fadeIn() 無縫地設定元素可見性的動畫。
• 元素可見性檢查： 修改腳本以檢測元素是否完全在視口內，無論滾動方向如何。

以上是如何使用 jQuery 檢測滾動期間元素的可見性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！