Найдите расстояние между двумя DIV, используя jQuery?

У меня есть два DIVs, которые мне нужны, чтобы узнать вычисленное расстояние между ними (по высоте). Я прочитал о функции смещения, но примеры не были написаны для того, как я пытаюсь это сделать.

Пример использования:

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

Я хочу знать расстояние между этими двумя.

Пожалуйста, помогите мне найти динамическое расстояние с помощью jQuery.

Ответы

Ответ 1

Что-то вроде этого должно работать:

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

Пока каждый класс имеет только один элемент на странице.
Если они не уникальны, дайте двум элементам идентификатор и ссылку с этим.

Ответ 2

Используйте .offset():

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

Ответ 3

Эта функция находит расстояние в пикселях между центром двух элементов, без 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;
}

Я использую его следующим образом:

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