В следующем примере создается страница с одним элементом 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>