width and offset methods

In notebook:
FrontEndMasters Advanced JS fundamentals
Created at:
2015-10-01
Updated:
2015-10-01
Tags:
JavaScript Fundamentals jQuery libraries
Learn JS Fundamentals to jQuery & Pure DOM Scripting Adding width() and offset methodsconvert string to number with parseInt​offsetTop​ ​offsetLeft​, ​offsetParent​ 

​offsetParent​ the first parent that has ​absolute​, ​relative​, ​fixed​, ​sticky​ positioning, anything other than ​static​ 

today a better way [than recursing up through all ​offsetParent​ elements] is the ​.getBoundingClientRect()​ method (returns ​.top​ and ​.left​ ) it's relative to the viewport.
To get an absolute offset position, you need to add the window scroll position
jquery gives ​.position()​ (relative to parent) and ​.offset()​ (relative to the page) – the naming is a little backwards for performance: the closest the [parent] element you are calculating the position to, the faster will be the calculation

​window.pageYOffset​ is the fastest way to get the scroll position (there's also ​scrollTop​ which works for all DOM elements)