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

我希望计算元素与文档窗口顶部之间的距离。在scroll上，我可以获得初始值，但它不会改变。如何在滚动条上找到该值以及数字已更改为什么

JS:

HTML:

你好，先生

将

元素的偏移量与用户在页面下方滚动的距离进行比较。

$（window）.scrollTop（）

函数将获取用户向下滚动的金额，以便：

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

---

您可以使用此功能获取窗口的滚动偏移：

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]);
    });
});

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

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

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

---

这正是设计的目的。

您是否希望将

保持在页面顶部？确切地说，当您滚动页面时，元素相对于文档顶部的位置不会改变。也许我遗漏了什么，但我认为这是正确的答案。我必须在点击事件的位置产生涟漪效应，而且它必须发生在一个表行中。因此，我必须暂时将绝对值a div放置在行的顶部，并隐藏溢出，以便涟漪不会超过行边界。滚动时，波纹的中心已关闭。这个解决方案对我很有效，很好，很简单。

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

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