Trova la distanza tra due DIV usando jQuery?

Question

Ho due DIV di cui ho bisogno per conoscere la distanza calcolata del browser (in altezza). Ho letto della funzione di offset ma gli esempi non sono stati scritti per il modo in cui sto provando a farlo.

Esempio utilizzo:

<div class="foo"></div> 
<div class="bar"></div> 

voglio sapere la distanza tra questi due.

Please help me per trovare la distanza in modo dinamico con jQuery.

Answer 1

Qualcosa del genere dovrebbe funzionare:

$('.foo').offset().top - $('.bar').offset().top 

Finché ogni classe ha un solo elemento della pagina.
Se non sono univoci, dai ai due elementi un ID e un riferimento.

Answer 2

Uso .offset():

$('.foo').offset().top - $('.bar').offset().top 

Answer 3

Questa funzione trova distanza in pixel tra il centro di due elementi, senza jquery:

function distanceBetweenElems(elem1, elem2) { 
    var e1Rect = elem1.getBoundingClientRect(); 
    var e2Rect = elem2.getBoundingClientRect(); 
    var dx = (e1Rect.left+(e1Rect.right-e1Rect.left)/2) - (e2Rect.left+(e2Rect.right-e2Rect.left)/2); 
    var dy = (e1Rect.top+(e1Rect.bottom-e1Rect.top)/2) - (e2Rect.top+(e2Rect.bottom-e2Rect.top)/2); 
    var dist = Math.sqrt(dx * dx + dy * dy); 
    return dist; 
} 

lo uso così:

var target1 = document.querySelector('#foo'); 
var target2 = document.querySelector('#bar'); 
if (distanceBetweenElems(target1,target2)<100){ 
    target1.classList.add('active'); 
}