Как определить расстояние от верха браузера до конца элемента?

Question

[Senseich]

Всем привет! Вопрос конечно простецкий, я знаю что можно померить с помощью offset().top и прибавить высоту элемента. Но мне интересно, может есть функция, которая сразу меряет от верха браузера до конца элемента? Или может есть "поэлегантней" способ? )

Answer 1

[AngReload]

На нативном js element.getBoundingClientRect().bottom
https://developer.mozilla.org/ru/docs/Web/API/Elem...

Comments

[Senseich]

AngReload, спс, я так понял этот метод отсчитывает не от самого верха, а от текущего положения браузера до элемента, т.е. не учитывает прокрутку?

[AngReload]

Senseich, да. https://learn.javascript.ru/coordinates — вот здесь получше написано.

[Senseich]

AngReload, подскажите, что не правильно делаю, я ещё нуб в js. Я вот так пишу:

var adv = $('.mixfix_now'); - это мой элемент.

$(window).on("scroll", function() {

  console.log(adv.getBoundingClientRect().bottom);

});

В консоле ошибка:

Что не так делаю?

[AngReload]

Senseich, надо var adv = document.querySelector('.mixfix_now');

[AngReload]

Senseich, или так var adv = $('.mixfix_now')[0];

[AngReload]

Senseich, дело в том что jquery возвращает jquery-коллекцию, а не DOM-элемент. Так что getBoundingClientRect вместе с jquery использовать не совсем удобно.

[Senseich]

AngReload, понял, да так работает, а в квери нет такой функции аналогичной?

[AngReload]

Senseich, только то что вы уже знаете - el.offset().left, el.offset().top, el.width(), el.height()

[Senseich]

AngReload, ну в моём случае getBoundingClientRect удобнее и лаконичней получается

[Senseich]

AngReload, извиняюсь, вопрос не по теме. Слышал такую вещь, что сейчас "не актуально" использовать на страничке id у элементов, а лучше использовать атрибуты data-*
Что можете по этому поводу подсказать? )

[AngReload]

Senseich, лучше задавать отдельные вопросы, сразу бы кто-нибудь ответил.
Ну, запихивать какую-нибудь инфу нужную яваскрипту в id просто неудобно (потребуются префиксы, два параметра в один атрибут уже не поместятся, data-атрибуты это стандарт описанный в документации).

А для CSS всему присваиваются классы, даже если элемент заведомо один на странице (профита в скорости нет, единообразие и заветы BEM, сегодня один, а завтра два).

Но, для некоторых штук, как форм, полей ввода, якорей всё же нужно использовать id, чтобы связывались input и label, чтобы страница прокручивалась к нужному месту.

Правда, это всё такие старые штуки как сама JQuery, не знаю чтобы сейчас были какие-то разговоры об актуальности id или других атрибутов.