sticky-sidebar
sticky-sidebar copied to clipboard
Twitch when sticky el is taller than viewport
The inline height of the sticky div starts bouncing, usually by 6px.
have the same problem, when init StickySidebar after page scrolling
Any proposed solution to this?
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.
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.