Encuentra la distancia entre el elemento HTML y los lados del navegador (o ventana)

Question

Cómo encontrar la distancia en píxeles entre el elemento html y uno de los lados del navegador (o ventana) (izquierda o arriba) usando jQuery?

Answer 1

Puede usar la función offset para eso. Se le da la posición del elemento con respecto a la (izquierda, arriba) del documento:

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

Live example en mi navegador, ese ejemplo dice que la esperanza de que hemos apuntado es a 157,47 (izquierda, arriba) del documento. Esto se debe a que he aplicado un gran valor de relleno al elemento body, y he usado un tramo con un espaciador encima y un texto delante.

Here's a second example mostrando un párrafo en la parte superior izquierda del documento, que muestra 0,0 como su posición (y también muestra un lapso más adelante que está desplazado desde la izquierda y la parte superior, 129,19 en mi navegador).

Answer 2

jQuery.offset tiene que ser combinada con scrollTop y scrollLeft como se muestra en este diagrama:

Demostración:

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>