[英]How can I trigger a function when a section touches the top of the viewport with Vanilla JS?
我基本上希望瀏覽器在用戶滾動時某個部分觸及視口頂部時觸發一個功能，但我不確定如何使用 Vanilla JS 執行此操作。
我找到了一些 jQuery 替代品，但我只是想弄清楚 Javascript 目前是如何工作的，所以我不確定從哪里開始或在谷歌上搜索什么。
以下示例創建一個頁面，其中包含一個 div。 滾動事件處理程序使用Element.getBoundingClientRect()來獲取 div 相對於視口的位置，並在 div 位於或高於視口的頂部邊緣時將 msg 記錄到控制台。
var handlerFired; window.addEventListener('scroll', function(e){ var containerTop = document.querySelector('.container').getBoundingClientRect().top; if (containerTop <= 0) { if (!handlerFired) { handlerFired = 1; console.log('container at top of viewport or above'); } } if (containerTop > 0) { handlerFired = 0; } });
body{ height:2000px; } .container{ width:300px; height:200px; border:5px solid red; position: absolute; top: 100px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class='container'> <p>scroll window ...</p> </div> </body> </html>
當用戶將元素滾動到視口中時觸發函數– Vanilla JavaScript
[英]Trigger a function when the user scrolls the element into the viewport – Vanilla JavaScript
如果元素在視口中停留X倍的時間，如何觸發函數？
[英]How can I trigger a function if an element is in the viewport for X amount of time?
如果部分在視口中，則向 div 添加/刪除類（vanilla JS）
[英]Add/remove class to div if section is in viewport (vanilla JS)
當球接觸頂部邊界時，如何添加“游戲結束”的警告框？
[英]How can I add alert box that says “game over” when the ball touches the top border?
在香草JS中，如何根據滾動條是否位於頂部來從元素中添加或刪除類？
[英]In vanilla JS, how can I add or remove a class from an element based on whether the scroll is at the top?
當用戶單擊jQueryUI單選按鈕時，如何停止瀏覽器視口移至頁面頂部？
[英]How can I stop the browser viewport moving to the top of the page when the user clicks on a jQueryUI radio button?
在移動視口中時，如何阻止bootstrap 4導航欄粘在頁面頂部？
[英]How can I stop the bootstrap 4 navbar from sticking to the top of the page when in mobile viewport?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.