Top value removed duing js-is-stuck class is added when useStickyClasses: true is used
djphan opened this issue · 1 comments
Describe the bug
I noticed that the top value of the sticky element is removed when you enable useStickyClasses. This unintuitive because if you just use the default stickybits, the top value (even if it is 0px) remains. What happens when you cross the threshold is that the sticky element jumps to the starting position of the element. This creates some visual issues that would normally not be there with just sticky.
To Reproduce
Example code pen here: https://codepen.io/djphan91/pen/MWjawJL
Expected behavior
I would expect that if you enable stickyClasses that the top value is not removed and the position sticky + top css is consistent with the default use of the stickybits init call.
Ideally I'd like to use the classes to track the state of the sticky element but if the class changes come with css inline style changes then that is undocumented or unintended behaviour.
Desktop (please complete the following information):
- OS: MacOS
- Browser Chrome
- Version Version 86.0.4240.198 (Official Build) (x86_64)
Additional context
You can take my code pen and remove the useStickyClasses values and see the difference when comparing the UX behaviour of my sticky element with and without the behaviour.
I wanted to report the same issue and had already created a CodePen. As I think that CodePen shows the problem more clearly, I'll just leave it here in this comment...
https://codepen.io/gmw-web/pen/poKvgdd
Notice that the sticky element in the 'Problem' column jumps/disappears as soon as you reach the bottom.