给定一个 HTML DOM ID，如何在 JavaScript/JQuery 中获取元素相对于窗口的位置？这与相对于文档或偏移父元素不同，因为元素可能位于 iframe 或其他一些元素内。我需要获取当前正在显示的元素矩形的屏幕位置（如位置和尺寸）。如果元素当前处于屏幕外（已滚动关闭），则可以接受负值。
这是一个 iPad (WebKit / WebView) 应用程序。每当用户点击 中的特殊链接时UIWebView，我应该打开一个弹出视图，显示有关该链接的更多信息。弹出视图需要显示一个箭头，指向调用它的屏幕部分。
最初，抓取元素的.offset位置并计算其相对于窗口的相对位置
请参考：
1.偏移
2.滚动
3. scrollTop的
你可以试试这个小提琴
以下几行代码解释了如何解决这个问题
当.scroll事件被执行时，我们计算元素相对于 window 对象的相对位置
$(window).scroll(function () {
console.log(eTop - $(window).scrollTop());
});
当在浏览器中执行滚动时，我们调用上面的事件处理函数
function log(txt) {
$("#log").html("location : <b>" + txt + "</b> px")
}
$(function() {
var eTop = $('#element').offset().top; //get the offset top of the element
log(eTop - $(window).scrollTop()); //position of the ele w.r.t window
$(window).scroll(function() { //when window is scrolled
log(eTop - $(window).scrollTop());
});
});#element {
margin: 140px;
text-align: center;
padding: 5px;
width: 200px;
height: 200px;
border: 1px solid #0099f9;
border-radius: 3px;
background: #444;
color: #0099d9;
opacity: 0.6;
}
#log {
position: fixed;
top: 40px;
left: 40px;
color: #333;
}
#scroll {
position: fixed;
bottom: 10px;
right: 10px;
border: 1px solid #000;
border-radius: 2px;
padding: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>
<div id="element">Hello
<hr>World</div>
<div id="scroll">Scroll Down</div>尝试边界框。这很简单：
var leftPos = $("#element")[0].getBoundingClientRect().left + $(window)['scrollLeft']();
var rightPos = $("#element")[0].getBoundingClientRect().right + $(window)['scrollLeft']();
var topPos = $("#element")[0].getBoundingClientRect().top + $(window)['scrollTop']();
var bottomPos= $("#element")[0].getBoundingClientRect().bottom + $(window)['scrollTop']();
function getWindowRelativeOffset(parentWindow, elem) {
var offset = {
left : 0,
top : 0
};
// relative to the target field's document
offset.left = elem.getBoundingClientRect().left;
offset.top = elem.getBoundingClientRect().top;
// now we will calculate according to the current document, this current
// document might be same as the document of target field or it may be
// parent of the document of the target field
var childWindow = elem.document.frames.window;
while (childWindow != parentWindow) {
offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
childWindow = childWindow.parent;
}
return offset;
};
你可以这样称呼它
getWindowRelativeOffset(top, inputElement);
我只根据我的要求关注 IE，但其他浏览器也可以这样做
TL; 博士
headroom_by_jQuery = $('#id').offset().top - $(window).scrollTop();
headroom_by_DOM = $('#id')[0].getBoundingClientRect().top; // if no iframe
.getBoundingClientRect()似乎是通用的。 从 jQuery 1.2 开始支持.offset()和.scrollTop()。感谢@user372551 和@prograhammer。要在 iframe 中使用 DOM，请参阅@ImranAnsari 的解决方案。
这听起来更像是您想要所选链接的工具提示。有很多 jQuery 工具提示，试试jQuery qTip。它有很多选项，并且很容易改变样式。
否则，如果您想自己执行此操作，则可以使用 jQuery .position(). 有关更多信息，请.position()访问http://api.jquery.com/position/
$("#element").position(); 将返回元素相对于偏移父元素的当前位置。
还有 jQuery .offset(); 这将返回相对于文档的位置。