當使用者使用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>
在上面的程式碼中:
您還可以修改事件來執行其他操作,例如元素進入視口時淡入淡出:
<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中文網其他相關文章!