我基本上希望浏览器在用户滚动时触摸视口顶部时触发一个函数，我不确定如何使用Vanilla JS执行此操作。
我发现了一些jQuery备选方案，但我只是想弄清楚Javascript目前是如何工作的，所以我不确定从哪里开始或者google什么的。
以下示例创建一个内部包含单个div的页面。 scroll事件处理程序使用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>