Finden Sie den Abstand zwischen HTML-Element und Browser (oder Fenster) Seiten

Question

Wie finden Sie den Abstand in Pixel zwischen HTML-Element und einer der Browser (oder Fenster) Seiten (links oder oben) mit jQuery?

Answer 1

Sie können dafür die Funktion offset verwenden. Es gibt Ihnen die Position relativ des Elements auf dem (links, oben) des Dokument:

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

Live example in meinem Browser, das Beispiel sagt, dass die Spanne wir gezielt habe bei 157,47 ist (links, oben) des Dokuments. Dies liegt daran, dass ich einen großen Füllwert auf das Element body angewendet habe und einen Bereich mit einem Abstandhalter darüber und etwas Text davor verwendet habe.

Here's a second example zeigt einen Absatz an der absoluten linken, oben im Dokument, zeigt 0,0 als seine Position (und zeigt auch eine Spannweite später, die von links und oben, 129,19 in meinem Browser versetzt ist).

Answer 2

jQuery.offset muss mit scrollTop und scrollLeft in diesem Diagramm gezeigten kombiniert werden:

Demo:

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>