Question

var offset = $(selector).offset();

如果我们向上和向下滚动页面，偏移变量的值会改变，我想要精确和固定的偏移值，同时保持“选择器”的位置默认（静态）。我怎么能这样做？

Answer 1

您总是可以计算偏移量，并在滚动位置进行分解：

var offset_t = $(selector).offset().top - $(window).scrollTop();
var offset_l = $(selector).offset().left - $(window).scrollLeft();

Answer 2

在遇到同样的问题之后，我想在这里添加我的答案：

获得上述行为I looked at the jQuery documentation后发现

jQuery不支持获取隐藏元素的偏移坐标，也不支持在body元素上设置边框，边距或填充。

我试图获得偏移量的元素实际设置为display:none;，给我一个错误的偏移量，当滚动时会改变（即使元素没有移动）。

因此，请确保您没有尝试获取隐藏元素的偏移量！希望这有助于某人：）

Answer 3

另一个可能的原因是，如果您的.bootstrap-select > .dropdown-toggle[title='Select role'], .bootstrap-select > .dropdown-toggle[title='Select role']:hover, .bootstrap-select > .dropdown-toggle[title='Select role']:focus, .bootstrap-select > .dropdown-toggle[title='Select role']:active { color: grey; }恰好有设置<body>的CSS，则会完全破坏jQuery的overflow-x: hidden;方法。

在这种情况下，offset()始终为0，因此接受的答案不起作用。

Answer 4

我对原始问题的问题非常类似。偏移是有点棘手的。希望这有助于解决您的问题。我有3个JSFiddles来演示。

如果你是基于窗口的div元素的offset().top，你将总是得到一个静态数字（即如果$(window)是滚动的东西，你在窗口内有一个div应用offset().top后，div将始终具有静态数字）。无论您滚动多远，此偏移量都是$(window)顶部元素存在的精确像素数。对于我的每个JSFiddles，我都会看到对象$('div#offset')距其顶部的滚动容器有多远。在第一个示例中，请注意数字如何变化：

https://jsfiddle.net/BrianIsSecond/ehkgh2gu/

现在，让我们说$(window)不是滚动的容器。您改为创建一个具有＆＃34; overflow-y的div：滚动;＆＃34;属性集。在这种情况下，$('div#offset').offset().top与前一个示例的行为截然不同。当您滚动时，您会注意到它会发生变化。对于我的JSFiddle示例，我只是将div#overflow中包含overflow-y:scroll;属性集的所有内容都包装起来。见例：

https://jsfiddle.net/BrianIsSecond/tcs390h6/＆lt; ---另请注意，div＃overflow不高100％。我把它做到100px 100％。我用这个来说明一个容易出错的错误，我将在下面讨论。

如果你喜欢我，示例2并不是你想要的。我找到的最佳解决方案是抓取$('#overflow').scrollTop()并将其添加到$('#offset').offset().top（即var ep = $('#offset').offset().top + $('#overflow').scrollTop()）。基本上，通过将这两个不断变化的数字加在一起，他们可以排序等等。相互取消，给你div#offset元素的确切位置......或者它们呢？好吧，这就是div#overflow的位置很重要的地方！您必须必须考虑可滚动容器的位置。为此，请在$('#overflow').offset().top之前取$('#offset').offset().top并从$('#overflow').scrollTop()中减去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); });。然后，这将从窗口中考虑可滚动容器的位置。见例：

https://jsfiddle.net/BrianIsSecond/yzc5ycyg/

最终，你要找的是这样的：

/*
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;
        }
}

更新（10/11/17）：我已经创建了一个功能来帮助解决这个问题。请享用！

Link

Answer 5

2015年，正确的＆＃39;不应再使用答案 - 已修改偏移量。使用上述解决方案的任何代码都将无法正常运行。

解决方案：请将jquery升级到更新版本（适用于1.11.3）。或者......改变.offset调用以使用.position代替。

通过滚动页面来更改jquery偏移值

5 个答案: