如何使用jQuery查找元素的绝对位置?


398

有没有一种方法可以使用jQuery查找元素的绝对位置,即相对于窗口的开始位置?

Answers:


650

.offset() 将作为简单对象返回元素的偏移位置,例如:

var position = $(element).offset(); // position = { left: 42, top: 567 }

您可以使用此返回值将其他元素放置在同一位置:

$(anotherElement).css(position)

90
我总是忘记了这一条,当我在Google:p
Aren

16
这并不似乎总是返回绝对位置,由于在边界等差异
汤姆

8
我正在使用chrome,offset()并且不会返回正确的顶部坐标。相反,它返回的元素比文档中元素的顶部坐标多300像素。为什么??
SoLoGHoST 2012年

1
chrome,FF和IE给出的结果不同:(
Rizwan Mumtaz 2013年

3
@Aren我总是忘记了这个,每次都发现您的评论很有趣:)
Alex

197

请注意,它$(element).offset()告诉您元素相对于文档的位置。在大多数情况下,这种方法效果很好,但在position:fixed您可能会得到意想不到的结果。

如果文档的长度大于视口,并且已垂直滚动到文档的底部,则position:fixed元素的offset()将大于预期值大滚动量。

如果要查找相对于视口(窗口)的值,而不是position:fixed元素上的文档,则可以scrollTop()从固定元素的offset().top值中减去文档的值。例:$("#el").offset().top - $(document).scrollTop()

如果position:fixed元素的偏移父级是document,则您想阅读parseInt($.css('top'))


8
我正是在寻找这个!对于像我这样的菜鸟来说,要减去的值是$(document).scrollTop()
Gianluigi Zane Zanettini博士2014年

3
太棒了!这应该是最佳答案!
Shivanshu Goyal 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.