Znajdź odległość między dwoma DIV za pomocą jQuery?

Question

Mam dwa DIV, które muszę znać obliczona odległość przeglądarki (w wysokości) z nich. Przeczytałem o funkcji przesunięcia, ale przykłady nie zostały napisane w sposób, w jaki próbuję to zrobić.

Przykład użycia:

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

Chcę wiedzieć, odległość pomiędzy tymi dwoma.

Proszę mi pomóc w dynamicznym znalezieniu odległości za pomocą jQuery.

Answer 1

Coś jak to powinno działać:

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

Dopóki każda klasa ma tylko jeden element na stronie.
Jeśli nie są unikatowe, podaj dwóm elementom identyfikator i odniesienie.

Answer 2

Zastosowanie .offset():

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

Answer 3

Funkcja ta wyznacza odległość do pikseli pomiędzy środkami dwóch elementów, nie 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; 
} 

go używać tak:

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