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

＆＃13;

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

＆＃13;

.vertical-space {
  height: 200vh;
}

.content-div {
  background-color: #333;
  color: #fff;
}

＆＃13;

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

＆＃13;

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

1 个答案: