Search code examples
scrollpositionoffsetstickygetboundingclientrect

offsetTop / getBoundingClientRect().top of the element with position: sticky

When element with position: sticky reach his offset (top: 0, for example) and stops on the screen, i can't get his offsetTop properly, it shows more than necessary. At the same time, I can't get getBoundingClientRect().top, because it shows 0. Please take a look at this example:

https://jsfiddle.net/Lxud76ma/

When the element is sticky, it reserves its place in DOM, but the calculations are takes on its actual location.

So, how can I get coordinates of an element when it is sticky? Any ideas?

Solution

  • I think i find an answer, but correct me if somebody know more properly way.

    Before calculating need to change position of element from sticky to static. Get his coordinates and bring him back to position: sticky.

    https://jsfiddle.net/Lk74do8u/