Найти расстояние между HTML-элементом и сторонами браузера (или окна)

Question

Как найти расстояние в пикселях между элементом html и одной из сторон браузера (или окна) (слева или сверху) с помощью jQuery?

Answer 1

Для этого вы можете использовать функцию offset.Он дает вам позицию элемента относительно (слева, сверху) документа :

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>