var offset = $(selector).offset();
如果我们向上和向下滚动页面,偏移变量的值会改变,我想要精确和固定的偏移值,同时保持"选择器"的位置默认(静态).我怎么能这样做？
tri*_*ter 37
您总是可以计算偏移量,并在滚动位置进行分解:
var offset_t = $(selector).offset().top - $(window).scrollTop();
var offset_l = $(selector).offset().left - $(window).scrollLeft();
另一个潜在原因是，如果您<body>碰巧设置了 CSS overflow-x: hidden;- 这完全破坏了 jQuery 的offset()方法。
在这种情况下，$(window).scrollTop()始终为 0，因此接受的答案不起作用。
我有一个与原始问题非常相似的问题。偏移有点棘手。希望这将有助于解决您的问题，就像我的问题一样。我有 3 个 JSFiddles 来演示。
offset().topdiv 元素作为窗口的基础，您将始终获得一个静态数字（即，如果$(window)div 是滚动的东西并且您在应用了窗口内offset().top的 div，则该 div 将始终具有一个静态数字）。$(window)无论您向下滚动多远，此偏移量都是元素距顶部的确切像素数。对于我的每个 JSFiddles，我会看到对象$('div#offset')离它的滚动容器顶部有多远。在第一个示例中，请注意数字是如何不变的：https://jsfiddle.net/BrianIsSecond/ehkgh2gu/
$(window)不是滚动的容器。您改为创建一个具有“溢出-y：滚动；”的 div。属性集。在这种情况下，其$('div#offset').offset().top行为与前一个示例非常不同。当您滚动时，您会注意到它发生了变化。对于我的 JSFiddle 示例，我只是将所有内容都包含在div#overflow具有overflow-y:scroll;属性集的内容中。见示例：https://jsfiddle.net/BrianIsSecond/tcs390h6/ <--- 还要注意 div#overflow 不是 100% 高。我使它比 100% 少了 100px。我用它来说明一个简单的错误，我将在接下来解决这个错误。
$('#overflow').scrollTop()并将其添加到$('#offset').offset().top（即var ep = $('#offset').offset().top + $('#overflow').scrollTop()）。基本上，通过将这两个不断变化的数字相加，它们“差不多”会相互抵消，从而为您提供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 (i.e. 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;
}
}
只是想在遇到同样的问题之后在这里添加我的答案:
在得到上述行为后,我查看了jQuery文档并发现了这一点
jQuery不支持获取隐藏元素的偏移坐标或者考虑body元素上的边框,边距或填充集.
我试图获得偏移的元素实际上设置为display:none;给我一个错误的偏移量,当滚动时改变(即使元素没有移动).
因此,请确保您没有尝试获取隐藏元素的偏移量!希望这有助于某人:)
| 归档时间： |
|
| 查看次数： |
35467 次 |
| 最近记录： |