Using jquery to get element's position relative to viewport

Question

What's the proper way to get the position of an element on the page relative to the viewport (rather than the document). jQuery.offset function seemed promising:

Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

But that's relative to the document. Is there an equivalent method that returns offsets relative to the viewport?

Answer 1

The easiest way to determine the size and position of an element is to call its getBoundingClientRect() method. This method returns element positions in viewport coordinates. It expects no arguments and returns an object with properties left, right, top, and bottom. The left and top properties give the X and Y coordinates of the upper-left corner of the element and the right and bottom properties give the coordinates of the lower-right corner.

element.getBoundingClientRect(); // Get position in viewport coordinates

Supported everywhere.