通过滚动页面来更改jquery偏移值
var offset = $(selector).offset(); 如果我们向上和向下滚动页面，偏移变量的值会改变，我想要精确和固定的偏移值，同时保持“选择器”的位置默认（静态）。我怎么能这样做？
您总是可以计算偏移量，并在滚动位置进行分解：
var offset_t = $(selector).offset().top - $(window).scrollTop(); var offset_l = $(selector).offset().left - $(window).scrollLeft();
只是想在遇到同样的问题之后在这里添加我的答案：
在得到上述行为后， 我查看了jQuery文档并发现了这一点
jQuery不支持获取隐藏元素的偏移坐标或者考虑在body元素上设置边框，边距或填充。
我试图获得偏移的元素实际上设置为display:none; 给我一个在滚动时改变的错误偏移（即使元素没有移动）。
因此，请确保您没有尝试获取隐藏元素的偏移量！ 希望这有助于某人:)
另一个可能的原因是你的恰好有CSS设置overflow-x: hidden; – 这完全打破了jQuery的offset()方法。
在这种情况下， $(window).scrollTop()始终为0，因此接受的答案不起作用。
我对原始问题的问题非常类似。 偏移是有点棘手的。 希望这有助于解决您的问题。 我有3个JSFiddles来演示。
- 如果你在窗口中基于div元素的
offset().top，你将总是得到一个静态数字（即如果$(window)是滚动的东西，你在窗口内有一个带offset().top的divoffset().top，div将始终具有静态数字）。 此偏移量是元素从$(window)顶部存在的精确像素数，无论您滚动多远。 对于我的每个JSFiddles，我都会看到对象$('div#offset')#offign$('div#offset')距离它的滚动容器顶部有多远。 在第一个示例中，请注意数字如何不变：
https://jsfiddle.net/BrianIsSecond/ehkgh2gu/
- 现在，假设
$(window)不是滚动的容器。 您改为创建一个具有“overflow-y：scroll”的div。 属性集。 在这种情况下，$('div#offset').offset().top行为与前一个示例完全不同。 滚动时，您会注意到它会发生变化。 对于我的JSFiddle示例，我简单地将所有内容包装在div#overflow，其中包含overflow-y:scroll;属性集。 见例子：
https://jsfiddle.net/BrianIsSecond/tcs390h6/ <---另请注意，div＃overflow不是100％高。 我把它缩短了100％，差不多100％。 我用它来说明一个容易犯的错误，我将在下面解决。
- 如果您喜欢我，示例2不是您想要的。 我找到的最好的解决方案是抓住
$('#overflow').scrollTop()并将其添加到$('#offset').offset().top（即var ep = $('#offset').offset().top + $('#overflow').scrollTop()）。 基本上，通过将这两个变化的数字加在一起，它们’sorta’相互抵消，给你div#offset元素的确切位置……或者它们呢？ 好吧，这就是div#overflow的位置很重要！ 您必须必须考虑可滚动容器的位置。 要做到这一点，取$('#overflow').offset().top并从$('#offset').offset().top减去它，然后再添加$('#overflow').scrollTop()。 然后，这将从窗口中考虑可滚动容器的位置。 见例子：
https://jsfiddle.net/BrianIsSecond/yzc5ycyg/
最终，你要找的是这样的：
var w = $('#overflow'), // overflow-y:scroll; e = $('#offset'); // element $('#overflow').scroll(function(){ var wh = w.height(), // window height sp = w.scrollTop(), // scroll position ep = (e.offset().top - w.offset().top) + sp; // element position console.log(ep); });
更新（10/11/17）：我已经创建了一个函数来帮助解决这个问题。 请享用！
/* function: betterOffset hint: Allows you to calculate dynamic and static offset whether they are in a div container with overscroll or not. name: type: option: notes: @param s (static) boolean required default: true | set false for dynamic @param e (element) string or object required @param v (viewer) string or object optional If you leave this out, it will use $(window) by default. What I am calling the 'viewer' is the thing that scrolls (ie The element with "overflow-y:scroll;" style.). @return numeric */ function betterOffset(s, e, v) { // Set Defaults s = (typeof s == 'boolean') ? s : true; e = (typeof e == 'object') ? e : $(e); if (v != undefined) {v = (typeof v == 'object') ? v : $(v);} else {v = null;} // Set Variables var w = $(window), // window object wp = w.scrollTop(), // window position eo = e.offset().top; // element offset if (v) { var vo = v.offset().top, // viewer offset vp = v.scrollTop(); // viewer position } // Calculate if (s) { return (v) ? (eo - vo) + vp : eo; } else { return (v) ? eo - vo : eo - wp; } }
我在编辑一个旧网站时遇到同样的问题，我发现的解决方法是使用$（selector）[0] .offsetTop而不是$（selector）.offset（）。top它现在正常适合我。
2015年，不再使用“正确”答案 – 已修改偏移量。 使用上述解决方案的任何代码都将无法正常运行。
解决方案：请将jquery升级到更新版本（适用于1.11.3）。 或者……改变.offset调用以使用.position代替。