Определение позиции элемента относительно viewport в JS

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

Для определения вертикального расположения элемента в пределах видимой области экрана примените element.getBoundingClientRect().top. Данный метод возвращает координату по оси Y, то есть верхнюю позицию элемента:

const topPos = document.querySelector('.element').getBoundingClientRect().top;
console.log(topPos);  // Выводим верхний отступ элемента – проще простого!

topPos отображает расстояние от верха видимой части страницы до нужного элемента. Эта информация бывает полезна при проектировании интерфейса или создании событий, активирующихся при прокрутке страницы.

Корректировка с учетом прокрутки страницы

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

const rect = document.querySelector('.element').getBoundingClientRect();
const absTopPos = rect.top + window.pageYOffset;
console.log(absTopPos);  // Получаем верхнюю позицию элемента, не учитывая текущее положение прокрутки.

Совместимость с браузерами

Метод getBoundingClientRect() отлично поддерживается всеми современными браузерами, однако не забывайте о возможных проблемах со старыми версиями (например, со старым-добрым IE), для которых может потребоваться использовать document.documentElement.scrollLeft/scrollTop.

Подробнее об этом расскажет наш спикер на видео

Учет изменения размеров окна просмотра

Обратите внимание на изменяющиеся размеры окна браузера, которые могут происходить при его масштабировании или при повороте мобильного устройства. Обработка событий resize или orientationchange поддержит правильное позиционирование элементов.

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

Представьте, что птица (🐦) парит на разной высоте над небоскребом (🏙️). Наша задача — определить ее расстояние от земли. Метод getBoundingClientRect().top выполняет аналогичную функцию для элементов страницы, позволяя определить их положение по вертикали:

const birdAltitude = document.querySelector('.bird').getBoundingClientRect().top;

Визуализируйте следующую картину:

Видимая часть страницы (🏙️):
| 🐦 | <-- Позицию данного элемента мы определяем
|    |
| 🏙️ | <-- Горизонт, край видимой области

Таким образом, вы можете наглядно представить, как работает .getBoundingClientRect().top.

Альтернативный метод: offsetTop и offsetParent

Если по каким-то причинам вы не можете использовать getBoundingClientRect(), попробуйте обратиться к свойствам offsetTop и offsetParent:

function findElementTopPos(element) {
    let totalOffset = 0;
    do {
        totalOffset += element.offsetTop || 0;
        element = element.offsetParent;
    } while(element);

    return totalOffset – document.body.offsetTop;
}

Однако стоит отметить, что метод getBoundingClientRect() позволяет избежать множества трудностей.

Для пользователей jQuery

Пользователю, предпочитающему jQuery, будет знаком метод .offset():

let topPos = $('.element').offset().top;
console.log(topPos);  // jQuery упрощает задачу: всё под контролем!

Однако следует помнить, что использование jQuery может быть более ресурсозатратным, чем чистый JavaScript, и не всегда является предпочтительным выбором.

Значимость точного позиционирования

Точное позиционирование элемента имеет важное значение для удобства работы с веб-приложением. От «приклеивающихся» заголовков страниц, важных для навигации, до «фиксированных» панелей инструментов – правильно расположенные элементы значительно улучшают пользовательский интерфейс.

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

1. Element: метод getBoundingClientRect() – Веб-API | MDN — Подробное руководство по методу getBoundingClientRect().
2. angularjs – Как получить значение offset().top элемента без использования jQuery? – Stack Overflow — Обсуждение для тех, кто хотел бы обойтись без использования jQuery.
3. position: sticky; | CSS-Tricks – CSS-Tricks — Вся информация о создании "липких" элементов с помощью position: sticky.
4. Window Object — Подробно о объекте Window от W3Schools.
5. javascript – Определение позиции элемента относительно документа – Stack Overflow — Обсуждение о том, как найти позицию элемента относительно всего документа.
6. Element: свойство scrollTop – Веб-API | MDN — Руководство по свойству scrollTop, которое, подобно getBoundingClientRect().top, связано с прокручиваемой областью, а не с видимой.