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:
// top: distancia al borde superior del viewport
// left: distancia al borde izquierdo del viewport
// right: distancia al borde derecho del viewport
// bottom: distancia al borde inferior del viewport
// width: ancho de la caja del elemento
// height: altura de la caja del elemento
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:
let coords = el.getBoundingClientRect();
// distancia al borde superior del viewport
coords.top
// distancia al borde derecho del viewport
coords.right
// distancia al borde inferior del viewport
coords.bottom
// distancia al borde izquierdo del viewport
coords.left
// ancho del elemento
coords.width
// alto del elemento
coords.height
// distancia del borde derecho del elemento al borde derecho del viewport
coords.right - coords.width
// distancia del borde inferior del elemento al borde inferior del viewport
coords.bottom - coords.height
// distancia del borde superior del elemento al inicio del documento (cuando se ha hecho scroll)
coords.top + scrollY
Recursos
Especificación: https://www.w3.org/TR/cssom-view-1/#dom-element-getboundingclientrect
Compatibilidad: http://caniuse.com/#search=getboundingclientrect
