首頁 > web前端 > js教程 > 主體

如何使用 jQuery 在特定元素進入使用者視窗時觸發事件?

Patricia Arquette
發布: 2024-10-31 09:47:02
原創
729 人瀏覽過

How to Trigger an Event When a Specific Element Enters the User's Viewport using jQuery?

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

在此場景中,您希望在特定元素時顯示警報h1 元素(ID 為「scroll-to」)進入使用者的瀏覽器檢視。要實現此目的,請計算元素相對於頁面頂部的偏移量並將其與當前滾動位置進行比較:

<code class="javascript">$(window).scroll(function() {
    var elementOffsetTop = $('#scroll-to').offset().top;
    var elementHeight = $('#scroll-to').outerHeight();
    var windowHeight = $(window).height();
    var scrollTop = $(this).scrollTop();

    if (scrollTop > (elementOffsetTop + elementHeight - windowHeight)) {
        console.log('H1 on the view!');
    }
});</code>
登入後複製

在上面的程式碼中:

  • offset()。 top 傳回從文件頂部到元素頂部的距離。
  • outerHeight() 傳回元素的高度,包括padding 和
  • 我們檢查捲動位置是否大於元素的偏移量減去其高度和視窗高度,以確保它在目前視窗中可見。

您還可以修改事件來執行其他操作,例如元素進入視口時淡入淡出:

<code class="javascript">$(window).scroll(function() {
    var elementOffsetTop = $('#scroll-to').offset().top;
    var elementHeight = $('#scroll-to').outerHeight();
    var windowHeight = $(window).height();
    var scrollTop = $(this).scrollTop();

    if (scrollTop > (elementOffsetTop + elementHeight - windowHeight)) {
        $('#scroll-to').fadeIn();
    }
});</code>
登入後複製

此外,為了改進檢測邏輯,您可以添加檢查以確定元素是否完全在視口內:

<code class="javascript">$(window).scroll(function() {
    var elementOffsetTop = $('#scroll-to').offset().top;
    var elementHeight = $('#scroll-to').outerHeight();
    var windowHeight = $(window).height();
    var scrollTop = $(this).scrollTop();

    if (scrollTop > (elementOffsetTop + elementHeight - windowHeight) && elementOffsetTop > scrollTop && (scrollTop + windowHeight > elementOffsetTop + elementHeight)) {
        //Do something
    }
});</code>
登入後複製

此更新的邏輯可確保僅當元素在視口中完全可見時才會觸發事件,無論滾動方向如何。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板