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

如何解决在javascript / jQuery中检测滚动元素的偏移量

|| 我正在寻找计算元素和文档窗口顶部之间的距离。滚动时，我可以获取初始值，但它不会改变。如何找到该值以及数字在滚动显示时变为什么？ JS：

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

HTML：

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

    

解决方法

        将

<h1>

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

$(window).scrollTop()

函数将为您提供用户向下滚动的数量，因此：

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

    ,        如果您讨厌算术（以及额外的函数调用），则可以做到这一点：

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

这正是getBoundingClientRect（）所做的。     ,        您可以使用此函数来获取窗口的滚动偏移量：

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

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