Определение абсолютной позиции элемента с jQuery

Быстрый ответ

Для того чтобы определить абсолютное положение элемента, достаточно воспользоваться методом .offset() из библиотеки jQuery:

var pos = $('#yourElement').offset(); // И ваши координаты готовы!

Координаты верхнего края и левого угла элемента можно получить через pos.top и pos.left.

А что делать с элементами с фиксированным позиционированием? В этом случае поможет метод .css(), а также преобразование полученных значений в целые числа:

var posY = parseInt($('#yourElement').css('top'), 10);
var posX = parseInt($('#yourElement').css('left'), 10);

Теперь вам не придется использовать компас!

Учет прокрутки и фиксированного позиционирования

В эру интернета вопрос работы с прокруткой остается актуальным. Если у вас имеются элементы с фиксированным позиционированием, важно учитывать смещение, вызванное прокруткой страницы:

var scrollPosY = $(window).scrollTop(); // Насколько прокрутили страницу вертикально?
var scrollPosX = $(window).scrollLeft(); // А горизонтально?

Сочетание этих данных с позицией элемента позволит вам всегда точно определить его местоположение.

Учет видимости

Невидимые элементы могут поставить вас перед сложной задачей "найти и обнаружить". jQuery примет на себя роль надежного помощника. Если элемент невидим, метод .offset() может вернуть 0 или неактуальные значения. Будьте внимательны:

if ($('#yourElement').is(':visible')) {
  // Все хорошо, продолжаем работу с .offset()
} else {
  // Внимание! Используем .css('top') и .css('left')
}

Визуализация

Элемент:          🔎
Начало документа: 🏰
#yourElement.offset(): 🧭 (Координаты)
Расстояние от элемента до начала документа 🏰: { top: Y, left: X }

Обеспечение стабильности результатов через CSS

С целью обеспечения стабильной работы метода .offset(), устанавливайте position: absolute в стилях элемента:

#yourElement {
  position: absolute; // Мы твердо стоим на земле, несмотря на все движения вокруг!
}

Позиция против смещения: понимаем различия

Метод .offset() возвращает положение элемента в контексте документа. В свою очередь, .position() выдает координаты относительно ближайшего позиционированного предка:

var parentPos = $('#yourElement').position();

При этом метод .position() опирается на позиционное родство элементов.

Меняющаяся обстановка: оставаться адаптивными

На динамичных веб-страницах, где контент и анимация неустанно меняются, позиции элементов могут изменяться со временем. Чтобы оставаться в курсе, синхронизируйте вызовы .offset() с событиями на странице:

$(window).on('resize scroll', function() {
  // Будьте готовы: веб-страница не ждет!
});

Полезные материалы

1. .offset() | Документация jQuery API
2. Разница между position() и offset()в jQuery – Stack Overflow
3. Введение в DOM – Веб API | MDN
4. Метод getBoundingClientRect() элемента – Веб API | MDN
5. Определение позиции (X,Y) HTML элемента – Stack Overflow
6. .scrollTop() | Документация jQuery API
7. Абсолютное позиционирование внутри относительного – CSS-Tricks