在javascript/jQuery中检测滚动元素的偏移量

Question

我期待计算元素和文档窗口顶部之间的距离.在滚动时,我可以获得初始值,但它不会改变.如何在滚动时找到此值以及数字已更改为什么？

JS:

$(function() {
    $(window).scroll(function() {
        var h1 = $("h1");
        console.log(h1.offset().top)
    });
});

HTML:

<div id="cover">   
    <h1>hello sir</h1> 
</div>

Answer 1

比较<h1>元素的偏移量与用户滚动页面的距离.该$(window).scrollTop()功能将为您提供用户向下滚动的金额,以便:

$(window).scroll(function() {
  var $h1 = $("h1");
  var window_offset = $h1.offset().top - $(window).scrollTop();
});

Answer 2

如果你讨厌算术(和额外的函数调用),这应该可以解决问题:

$(function() {
    var h1 = document.getElementsByTagName("h1")[0];
    $(window).scroll(function() {
        console.log(h1.getBoundingClientRect().top);
    });
});

这正是getBoundingClientRect()的用途.