Cuando trabajamos en diseño de interfaces puede ser muy útil conocer las coordenadas de un elemento respecto a la ventana (viewport). Si bien jQuery nos facilitaba mucho obtener estos valores, se puede hacer muy fácil también con Vanilla JS (JavaScript puro). Veamos como
element.getBoundingClientRect()
El método getBoundingClientRect() aplicado a un elemento devuelve un objeto ClientRect que contiene las siguientes propiedades de la caja del elemento:
1 2// top: distancia al borde superior del viewport 3// left: distancia al borde izquierdo del viewport 4// right: distancia al borde derecho del viewport 5// bottom: distancia al borde inferior del viewport 6// width: ancho de la caja del elemento 7// height: altura de la caja del elemento 8
Debes tener en cuenta que estas distancias se calculan del punto (0,0) del elemento que corresponde a su esquina superior derecha, por lo que podrías caer en el error de pensar que si un elemento está pegado a la derecha del viewport, el valor de right es 0, en este caso más bien right == width. Veamos con un gráfico que lo dejará más claro.
Entonces:
1let coords = el.getBoundingClientRect(); 2 3// distancia al borde superior del viewport 4coords.top 5// distancia al borde derecho del viewport 6coords.right 7// distancia al borde inferior del viewport 8coords.bottom 9// distancia al borde izquierdo del viewport 10coords.left 11 12// ancho del elemento 13coords.width 14// alto del elemento 15coords.height 16 17// distancia del borde derecho del elemento al borde derecho del viewport 18coords.right - coords.width 19// distancia del borde inferior del elemento al borde inferior del viewport 20coords.bottom - coords.height 21 22// distancia del borde superior del elemento al inicio del documento (cuando se ha hecho scroll) 23coords.top + scrollY 24
Recursos
Especificación: https://www.w3.org/TR/cssom-view-1/#dom-element-getboundingclientrect
Compatibilidad: http://caniuse.com/#search=getboundingclientrect