当一个部分触及带有 Vanilla JS 的视口顶部时，我如何触发一个函数？

Question

我基本上希望浏览器在用户滚动时某个部分触及视口顶部时触发功能，但我不太确定如何使用 Vanilla JS 执行此操作。

我找到了一些 jQuery 替代方案，但我只是想弄清楚 Javascript 目前是如何工作的，所以我不确定从哪里开始或做什么google 就此而言。

Answer 1

以下示例创建一个页面，其中包含一个 div。滚动事件处理程序使用 Element.getBoundingClientRect() 来获取 div 相对于视口的位置，并在 div 位于或高于视口顶部边缘时将消息记录到控制台视口。

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 JS 的视口顶部时，我如何触发一个函数？

How can I trigger a function when a section touches the top of the viewport with Vanilla JS?

javascript

viewport