首頁 > web前端 > js教程 > 如何在 jQuery 中滾動到特定元素時觸發事件?

如何在 jQuery 中滾動到特定元素時觸發事件?

Barbara Streisand
發布: 2024-11-02 13:41:02
原創
977 人瀏覽過

How to Trigger an Event When Scrolling to a Specific Element in jQuery?

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

問題

使用者希望在向下捲動網頁並到達時顯示警報訊息特定的h1 元素。他們嘗試使用scroll()事件,但沒有成功。

解決方案

要確定 h1 元素何時進入瀏覽器視圖,我們需要計算它相對於頂部的偏移量並進行比較它與當前的滾動值。這是修改後的程式碼:

<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) && wS < hT && wS+wH > hT+hH){
       console.log('H1 on the view!'); // or trigger any desired event
   }
});</code>
登入後複製

增強

  • 示範小提琴:沒有警報的即時範例,而是在 h1 元素中淡入淡出。
  • 更新的程式碼:現在檢查元素是否在視口內,無論滾動方向如何。
  • 更新的示範小提琴:顯示更新程式碼的功能.

以上是如何在 jQuery 中滾動到特定元素時觸發事件?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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