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

Question

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

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

Answer 1

最初，捕获 .offset元素的位置并计算其相对于窗口的相对位置

引用:
1. offset
2. scroll
3. scrollTop

你可以试试这个 fiddle

下面几行代码解释了如何解决这个问题

当.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 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>