Trouver la distance entre l'élément HTML et les côtés du navigateur (ou de la fenêtre)

Question

Comment trouver la distance en pixels entre un élément html et un des côtés du navigateur (ou de la fenêtre) (gauche ou haut) en utilisant jQuery ?

Answer 1

Vous pouvez utiliser le offset pour cela. Elle vous donne la position de l'élément par rapport à la position (gauche, haut) de l'image de l'élément. document :

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

Exemple concret Sur mon navigateur, cet exemple indique que le span que nous avons ciblé se trouve à 157,47 (gauche, haut) du document. Cela s'explique par le fait que j'ai appliqué une grande valeur de padding à la balise body et a utilisé un span avec un espaceur au-dessus et du texte devant.

Voici un deuxième exemple afficher un paragraphe à la gauche et au haut absolus du document, en affichant 0,0 comme position (et aussi afficher un span plus tard qui est décalé à la fois de la gauche et du haut, 129,19 sur mon navigateur).

Answer 2

jQuery.offset doit être combiné avec scrollTop y scrollLeft comme indiqué dans ce diagramme :

Démonstration :

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>