On faster scroll, Sticky overflows other items

[willslater]

I have a weird issue, maybe it is just my machine but I haven't seen this issue when adding sticky directly through css.

I have a sticky card which appears between 2 elements, it works when I slow scroll, but when I scroll faster (and by fast I mean just quicker than slow, not majorly fast) the Sticky container overshoots the top and bottom, then resets, almost like it takes a second to remove the sticky class.

Maybe I am missing a delay setting or something? Has anyone else experienced this. Its not a particularly resource intensive page that it should be that slow.

[Seventysevendays]

same issue

[JohnRubado]

same issue as well

[AmmadKhanM]

Same Issue

[lak7]

same issue

[droplab]

same issue

[droplab]

It appears adding a className rule with position:sticky to the <Sticky ...> component fixes the issue. If you use tailwind, this will do the trick className='sticky'