jQuery 获取元素相对于窗口的位置 [英] jQuery get the location of an element relative to window

问题描述

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

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

解决方案

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

参考:
1. 偏移量
2. 滚动
3. scrollTop

你可以试试这个fiddle

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

当 .scroll 事件被执行时，我们计算相对于窗口对象的元素

$(window).scroll(function () {console.log(eTop - $(window).scrollTop());});

在浏览器中进行滚动时，我们调用上面的事件处理函数

代码片段

<小时>

function log(txt) {$("#log").html("位置:<b>" + txt + "</b> px")}$(函数(){var eTop = $('#element').offset().top;//获取元素顶部的偏移量日志(eTop - $(window).scrollTop());//ele w.r.t 窗口的位置$(window).scroll(function() {//当窗口滚动时日志(eTop - $(window).scrollTop());});});

#element {边距:140px；文本对齐:居中；填充:5px；宽度:200px；高度:200px；边框:1px 实心 #0099f9;边框半径:3px；背景:#444；颜色:#0099d9；不透明度:0.6；}#日志 {位置:固定；顶部:40px；左:40px；颜色:#333；}#滚动{位置:固定；底部:10px；右:10px；边框:1px 实心 #000；边界半径:2px；填充:5px；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="日志"></div><div id="元素">你好<hr>世界</div>
向下滚动

Given an HTML DOM ID, how to get an element's position relative to the window in JavaScript/JQuery? This is not the same as relative to the document nor offset parent since the element may be inside an iframe or some other elements. I need to get the screen location of the element's rectangle (as in position and dimension) as it is currently being displayed. Negative values are acceptable if the element is currently off-screen (have been scrolled off).

This is for an iPad (WebKit / WebView) application. Whenever the user taps on a special link in an UIWebView, I am supposed to open a popover view that displays further information about the link. The popover view needs to display an arrow that points back to the part of the screen that invokes it.

解决方案

Initially, Grab the .offset position of the element and calculate its relative position with respect to window

Refer :
1. offset
2. scroll
3. scrollTop

You can give it a try at this fiddle

Following few lines of code explains how this can be solved

when .scroll event is performed, we calculate the relative position of the element with respect to window object

$(window).scroll(function () {
    console.log(eTop - $(window).scrollTop());
});

when scroll is performed in browser, we call the above event handler function

code snippet

---

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>

这篇关于jQuery 获取元素相对于窗口的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！