> The amount of scrolling that has been done of the viewport area (or
> any other scrollable element) is taken into account when computing
> the bounding rectangle. This means that the top and left property
> change their values as soon as the scrolling position changes (so
> their values are relative to the viewport and not absolute). If
> this is not the desired behaviour just add the current scrolling
> position to the top and left property (via window.scrollX and
> window.scrollY) to get constant values independent from the current
> scrolling position.
see: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
var rect = el.getBoundingClientRect();
return {
- top: rect.top + document.body.scrollTop,
- left: rect.left + document.body.scrollLeft
+ top: rect.top + window.scrollY,
+ left: rect.left + window.scrollX
};
},