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

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

jQuery.offset его необходимо сочетать с scrollTop и scrollLeft как показано в этой диаграмме:

viewport scroll and element offset

Демо:

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>

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*