findHTML元素和浏览器（或窗口）边之间的距离

如何使用jQuery查找html元素和浏览器（或窗口）之一（左侧或顶部）之间的像素距离？

Answer 1

你可以使用offsetfunction。 它给出了元素相对于文档 （左边，顶部）的位置：

 var offset = $("#target").offset(); display("span is at " + offset.left + "," + offset.top + " of document"); 

现场示例在我的浏览器中，该示例说明我们的目标范围是文档的157,47（左侧，顶部）。 这是因为我已经为body元素应用了一个很大的填充值，并且在上面使用了一个带有间隔的跨度，并在它之前使用了一些文本。

下面是第二个例子 ，在文档顶部的绝对左侧显示一个段落，显示0,0作为它的位置（也显示了后面的跨度，从左侧和顶部的偏移量129,19在我的浏览器上）。

Answer 2

jQuery.offset需要与scrollTop和scrollLeft结合使用，如下图所示：

演示：

 function getViewportOffset($e) { var $window = $(window), scrollLeft = $window.scrollLeft(), scrollTop = $window.scrollTop(), offset = $e.offset(); return { left: offset.left - scrollLeft, top: offset.top - scrollTop }; } $(window).on("load scroll resize", function() { var viewportOffset = getViewportOffset($("#element")); $("#log").text("left: " + viewportOffset.left + ", top: " + viewportOffset.top); }); 

 body { margin: 0; padding: 0; width: 1600px; height: 2048px; background-color: #CCCCCC; } #element { width: 384px; height: 384px; margin-top: 1088px; margin-left: 768px; background-color: #99CCFF; } #log { position: fixed; left: 0; top: 0; font: medium monospace; background-color: #EEE8AA; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- scroll right and bottom to locate the blue square --> <div id="element"></div> <div id="log"></div>