Задачка: нужно высчитать расстояние от элемента до края окна браузера, при чем на этот элемент действует position: absolute;
Для чего нужен такой расчет? Мне лично понадобился в меню. Делали красивое меню с выплывающими подпунктами и в скрипт рассчитывал не от края экрана, а от header
у которого стоял position: absolute;
. Поэтому мне нужно было найти это расстояние (от края экрана до div
с меню) и отнять его.
Код рабочий, проверен на практике.
var distance = document.getElementById("nav_sections").getBoundingClientRect();
//console.log(distance.left); //Тут расстояние от левого края экрана до левой точки нашего элемента с ID "nav_sections"
<div id="nav_sections">
<div class="nav"></div>
</div>
В коде используется метод elem.getBoundingClientRect()
.
Про него вы можете прочитать здесь: ссылка.
Обращу только на несколько аспектов
elem.getBoundingClientRect()
Метод elem.getBoundingClientRect()
возвращает координаты элемента, под которыми понимаются размеры «воображаемого прямоугольника», который охватывает весь элемент.
Координаты возвращаются в виде объекта со свойствами:
top
– Y-координата верхней границы элемента,left
– X-координата левой границы,right
– X-координата правой границы,bottom
– Y-координата нижней границы.Например:
Координаты относительно окна не учитывают прокрутку, они высчитываются от границ текущей видимой области.
Иначе говоря, если страницу прокрутить, то элемент поднимется выше или опустится ниже – его координаты относительно окна изменятся.
top
-координата будет меньше нуля.getBoundingClientRect
свойства для ширины и высоты: width/height
, но их можно получить и простым вычитанием: height = bottom - top
, width = right - left
.