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

Question

我的页面上有一个 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>

Answer 1

您可以使用 getBoundingClientRect() 获取元素相对于视口的位置。请参阅我添加的示例。当您滚动文档时，它将记录 div 距视口顶部的像素数。

在滚动上进行工作时，最好对要进行的工作进行去抖动处理。有关详细信息，请参阅此处：https://davidwalsh.name/javascript-debounce-function

const
  contentDiv = document.getElementById('content-div');
  
function onScrollHandler(event) {
  console.log(`Pixels from top: ${contentDiv.getBoundingClientRect().top}`);  
}

window.addEventListener('scroll', onScrollHandler);

.vertical-space {
  height: 200vh;
}

.content-div {
  background-color: #333;
  color: #fff;
}

<div class="vertical-space"></div>
<div id="content-div" class="vertical-space content-div">Now you see me</div>

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

How to log when a div hits the top of the page

html

javascript

console.log