Javascript 当div到达页面顶部时如何记录

我的页面上有一个Div。当它到达页面顶部时，它应该输出一个console.log。到目前为止，这是我的代码，但它不适合我。有什么建议吗？ 谢谢，很抱歉我的英语不好

  var distance = $('.img').offset().top;
    $window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
        console.log("Div is now at the top of the site!")
    }
});

这是我的HTML部分：

<div class="img">
        <img src="city.jpg">
        </div>

---

您可以使用

getBoundingClientRect（）

获取元素相对于视口的位置。请参见我添加的示例。滚动文档时，它将记录div距视口顶部的像素数

当你在卷轴上工作的时候，最好把你想做的工作去抖动。有关更多信息，请参见此处：

const
contentDiv=document.getElementById（'content-div'）；
函数onScrollHandler（事件）{
log（`Pixels from top:${contentDiv.getBoundingClientRect（）.top}`）；
}
addEventListener（'scroll'，onScrollHandler）
。垂直空间{
高度：200vh；
}
.内容组{
背景色：#333；
颜色：#fff；
}

现在你看到我了
。。。。它起作用了。这里有什么问题？我在Chrome中仍然会遇到这样的错误：“script.js:1 Uncaught TypeError:无法读取script.js:1（匿名）@script.js:1处未定义的属性'top'”代码也在Chrome中工作。您一定还有什么没有告诉我们的。我仍然收到以下错误：script.js:14 Uncaught TypeError:无法读取onScrollHandler（script.js:14）上null的属性“getBoundingClientRect”onScrollHandler@script.js:14您的意思是在我的答案中，还是将答案复制并粘贴到您自己的代码中？即使我一对一地复制您的代码，也会出现此错误。我的示例使用的类名与您的代码不同，如果不稍加修改，它将无法工作。我确实更改了类名。即使我把你的代码一一对应，我仍然会遇到这个错误。“未捕获的TypeError:无法读取null的属性'getBoundingClientRect'”