## 如何使用 jQuery 檢查元素在視窗中是否可見？

使用jQuery 偵測視窗中元素的可見性

問題：

如何判斷特定元素是否例如類別為「 media」的元素是否在目前瀏覽器視窗內？

答案：

確定某個元素在視口內是否可見，無論對於滾動位置，您可以使用如下所示的jQuery 函數：

<code class="js">$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};</code>

此函數將元素的頂部和底部位置與視窗的位置進行比較。如果元素的底部位置低於視口頂部且其頂部位置高於視口底部，則該元素被視為可見。

要監視因滾動或調整大小而導致的可見性變化，可以使用以下事件處理程序：

<code class="js">$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // Perform actions for visible elements
    } else {
        // Perform actions for non-visible elements
    }
});</code>

請注意，此函數僅檢查元素的垂直視口狀態；它不會驗證它是否水平延伸超出視口。

以上是## 如何使用 jQuery 檢查元素在視窗中是否可見？的詳細內容。更多資訊請關注PHP中文網其他相關文章！