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

【问题标题】：Detecting offset of an element on scroll in javascript / jQuery在javascript / jQuery中检测滚动元素的偏移量
【发布时间】：2011-09-21 13:16:39
【问题描述】：

我正在寻找计算元素与文档窗口顶部之间的距离。在滚动时，我可以获得初始值，但它不会改变。我怎样才能找到这个值以及滚动时数字变成了什么？

JS：

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

HTML：

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

【问题讨论】：

您是否希望将<h1> 保留在页面顶部？

标签： javascript jquery html offset

【解决方案1】：

将<h1> 元素的偏移量与用户向下滚动页面的距离进行比较。 $(window).scrollTop() 函数将为您提供用户向下滚动的数量：

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

【讨论】：

确切地说，当您滚动页面时，元素相对于文档顶部的位置不会改变。

【解决方案2】：

你可以使用这个函数来获取窗口的滚动偏移量：

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

然后您可以使用函数中的偏移量来确定元素的实际位置：

$(function() {
    $(window).scroll(function() {
        var h1 = $("h1");
        var offs = getScrollXY();
        console.log(h1.offset().top - offs[1]);
    });
});

理论上，这应该适用于所有浏览器，但坦率地说，我没有做太多测试。

【讨论】：

【解决方案3】：

如果你讨厌算术（和额外的函数调用），这应该可以解决问题：

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

这正是 getBoundingClientRect() 的用途。

【讨论】：

也许我遗漏了一些东西，但 IMO 这是正确的答案。我必须在点击事件的位置产生连锁反应，并且它必须发生在表格行内。所以我不得不暂时将绝对的 div 放置在行的顶部，并隐藏溢出，这样波纹就不会超过行边界。滚动时波纹的中心关闭。这个解决方案对我有用，又好又简单。