sticky-sidebar icon indicating copy to clipboard operation
sticky-sidebar copied to clipboard

Twitch when sticky el is taller than viewport

Open alvarix opened this issue 4 years ago • 4 comments

The inline height of the sticky div starts bouncing, usually by 6px.

alvarix avatar Jun 18 '20 18:06 alvarix

have the same problem, when init StickySidebar after page scrolling

ustenko avatar Jun 22 '20 19:06 ustenko

Any proposed solution to this?

LedzZm avatar Oct 08 '20 17:10 LedzZm

Coming back to this... seems like the problem is not the element being taller than the viewport but taller that it's containing element.

That could be caused by broken floats in older projects or vertical margins on block elements inside the container etc...

In that case the sticky-sidebar.js:315 is always falsy and enters an event loop of (becoming sticky -> repositioning the element -> recalculating -> stop being sticky -> recalculating (not having the secondary condition met) -> looping again.

My explanation might be a bit messy, but its kinda hard to paint the picture without... well... painting a picture :P

tl;dr: Make sure the sticky elements height does not exceed its container.

LedzZm avatar Oct 12 '20 19:10 LedzZm

I ran into this issue when having elements with top and bottom margins in my sidebar. The solution for me was to apply overflow: auto; to the element where the children had the margins.

Namstel avatar May 17 '21 13:05 Namstel