使用jQuery获取固定div的位置

16

我有一个带有“fixed”定位的 div,我想在用户滚动页面时获取其相对于整个文档的位置值。

也就是说,假设我将该 div 放在 (x=0,y=0) 的位置,然后用户向下滚动一点,现在相对于文档,该 div 在 (X=0,y=300) 的位置。我想获取这些信息,我想知道该 div 在每个时刻的确切位置,再次强调是相对于整个文档,而不是窗口或浏览器。

我尝试了很多方法,但似乎没有能够实现我的目标。

其中一个方法是这段代码,但是它在处理固定的 div 时无法正常工作

var position = $("#fixed").offset(); /*it gets the position of the div
                                     "fixed" relative to the document*/
$("#fixed").html(position.top);      /*it prints the obtained
                                     value on the div "fixed"*/

在这里可以找到正在运行的代码,你可以看到,当你向下滚动时,固定div的位置值没有改变

如果我没错的话,代码应该每次相对于文档的垂直位置发生变化时,在div上打印一个新值。但事实证明这并没有发生。


已解决:

问题由codef0rmer解决。我漏掉了跟踪滚动以刷新固定div位置的数值。我真是个笨蛋。所以最终代码按照他编写的方式正常工作:

$(function () {
    var position = $("#fixed").offset();
    $("#fixed").html(position.top);

    $(window).scroll(function () {
       var position = $("#fixed").offset();
        $("#fixed").html(position.top);
    });
})

在这里你可以看到正在运行的代码

感谢大家,特别是codef0rmer。


我来这里评论,我犯了完全相同的愚蠢错误,而这个答案为我节省了宝贵的时间。 :D - Anwi77
4个回答

15

你可以使用 .offset() 方法获取元素相对于文档的当前坐标,而使用 .position()方法则可以获取元素相对于其偏移父级的当前坐标。


1
谢谢,虽然这个答案本质上与之前的答案相同,但它并不起作用。我再次编辑了问题,并添加了一个演示,让您看到它不起作用。 - m4rk
1
如果不编写任何代码来跟踪滚动,您希望代码如何工作? 请参见:http://jsfiddle.net/kVJ4x/4/ - codef0rmer
是的,我后来意识到了,并且想尝试使用“mousemove”刷新值,这是一个愚蠢的想法,考虑到我想要的是在用户向下滚动时触发操作。谢谢,现在它完美地运行了,我会发布它。 - m4rk

5

.offset()方法可以让您获取元素相对于整个文档的当前位置。

.offset()方法允许我们检索一个元素相对于文档的当前位置。与之相比,.position()方法检索相对于偏移父级的当前位置。当在现有元素上方定位新元素以进行全局操作(特别是实现拖放时),.offset()方法更加有用。

.offset()方法返回一个包含属性top和left的对象。

注意:jQuery不支持获取隐藏元素的偏移坐标,也不考虑设置在body元素上的边框、外边距或内边距。


1
有用的信息... $("#<divId>").offset().left, $("#<divId>").offset().top - Tejasva Dhyani
2
谢谢,但是正如我所说,我已经尝试了很多东西,花费了几个小时的时间,当然我也看了 jQuery API,那是你引用的内容。我编辑了我的信息,包括你建议的方法,但它不起作用。 - m4rk

0

除非您刷新页面并且滚动条在初始化时处于不同的位置。


0
($("div").offset().top - $(document).scrollTop())

3
你好!您能否进一步阐述您的答案?仅发布一段代码对社区来说并没有太多帮助,我认为。 - kunambi

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接