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);