jQuery获取元素相对于窗口的位置

Question

给定HTML DOM ID,如何在JavaScript/JQuery中获取元素相对于窗口的位置？这与相对于文档和偏移父项不同,因为该元素可能位于iframe或其他元素内.我需要获取元素矩形的屏幕位置(如位置和尺寸),因为它当前正在显示.如果元素当前处于屏幕外(已滚动关闭),则可以接受负值.

这适用于iPad(WebKit/WebView)应用程序.每当用户点击一个特殊链接时UIWebView,我应该打开一个弹出视图,显示有关该链接的更多信息.弹出视图需要显示一个箭头,该箭头指向调用它的屏幕部分.

Answer 1

最初,抓住元素的.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>

Answer 2

试试边界框.这很简单:

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']();

Answer 3

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,但可以为其他浏览器做类似的事情

Answer 4

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 的解决方案。