Как получить высоту блока от верха страницы jquery или js?

Question

[jrborisov]

У меня есть шапка сайта, под шапкой прикручено меню пользователя. и меню пользователя отступ от верха идет абсолют раньше я просто задавал отступ 80 px и все было хорошо. теперь же появился блок над шапкой который иногда есть иногда нет. и отступ в 80 px нужно динамически изменять. то есть задача определить высоту от верха страницы для шапки + 40 px шапка и я получу на сколько нужно отступить для меню пользователя.

Answer 1

[Денис Беляев]

В jQuery есть специальный метод .offset() для получения координат элемента относительно документа. Чтобы получить расстояние от верха страницы до шапки используйте вот такой код: $('<селектор шапки>').offset().top

На чистом Javascript всё немного сложнее. Сначала нужно получить координаты объекта на странице с помощью getBoundingClientRect() а после этого прибавить к этим координатам значение скроллинга. Вот функция, которая работает аналогично jQuery.offset() (взято здесь):

function offset(el) {
    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}