jQuery获取元素相对于窗口的位置
给定一个HTML DOM ID，如何在JavaScript / JQuery中获取元素相对于窗口的位置？ 这不是相对于文档也不是相同的，因为元素可能在iframe或其他元素中。 我需要获取元素的矩形的屏幕位置（如位置和维度），因为它正在显示。 如果元素当前不在屏幕上（已经滚动），则负值是可以接受的。
这是一个iPad（WebKit / WebView）应用程序。 每当用户点击一个UIWebView的特殊链接，我应该打开一个popup视图，显示关于链接的更多信息。 弹窗视图需要显示一个箭头，指向调用它的屏幕部分。
首先，抓取元素的.offset位置并计算其相对于窗口的相对位置
请参阅 ：
1. 抵消
2. 滚动
3. scrollTop
你可以试试这个小提琴
以下几行代码解释了如何解决这个问题
当.scroll事件被执行时，我们计算元素相对于窗口对象的相对位置
$(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 wrt 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，但其他浏览器也可以做类似的工作
这听起来更像是你想要一个工具提示select的链接。 有许多jQuery工具提示，试用jQuery qTip 。 它有很多select，很容易改变风格。
否则，如果你想自己做这个，你可以使用jQuery .position() 。 有关.position()更多信息，请.position() http://api.jquery.com/position/
$("#element").position(); 将返回一个元素相对于偏移父对象的当前位置。
还有jQuery .offset（）; 这将返回相对于文档的位置。
TL; DR
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的解决scheme 。
function trbl(e, relative) { var r = $(e).get(0).getBoundingClientRect(); relative = $(relative); return { t : r.top + relative['scrollTop'] (), r : r.right + relative['scrollLeft'](), b : r.bottom + relative['scrollTop'] (), l : r.left + relative['scrollLeft']() } } // Example trbl(e, window);
