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

小编典典

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

all

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

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

阅读 70

2022-07-31

共1个答案

小编典典

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

参考：
1.偏移
2.滚动
3.滚动顶部

你可以试试这个 小提琴

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

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

2022-07-31