Position sticky doing werid jumps on mobile
Hi there. So I have a button that is sticky on mobile. It should only show when the user scrolls past a certain element. However it's acting up quite bad, and moving all over the place. Any idea what could be causing this? I tried using both top and bottom as the position.
The button is always sticky, the class "in-view" that gets applied via javascript changes the opacity.
Pased an image of the element in question
8 Replies
Few things, watch out for using viewport units, I see the width: calc vw and just ask why or was it necessary use % or nothing. Please don't set strict pixel fonts its bad as users can't change. (specially on body)
For your actually problem I'm not sure what the "all over" behavior is. If you could explain what its doing and what you expect it to. It could be an issue of using
top: 90% and the mobile viewport shifting cause of bars?
I'd use something like bottom and a hard pixel value personally
bottom: 40px; (you would need to change the relative parent to do that ig.. 🤔
maybe try top: 90vmax
Then its at least a hard value and should not shift cause of the mobile bars.Thanks for taking a look at it @b1mind ! Your solution worked 🙂 I figured top:90% was causing the issues. I used bottom as well, but it never worked. I actually never knew what vmax does, but now I know 😄 however wouldn't vh be more correct, since if it would be based off of vw (for example if the user rotates their screen) it would break? Will try it tomorrow.
As for your pointers regarding px, I know I know... I've been meaning to change it, but this was a rather large project & I don't want to muck about with things that could make it take longer. However in my next project which is smaller, I'll be using rem for font-sizes & margins, and if all goes smooth I'll post those changes over to this site. Since most things are done globally it should be rather fast.
VH would cause the same issue as % if not worse. It changes when bars leave and enter
You could write another media to use vmin when mobile landscape
New viewport units will help a bit with this but it's def a pain point
Doesn't 90 vmax mean 90 vh on mobile (since vh > vw), but 90vw if the mobile is rotated? since vw > vh
Hongkiat
Guide to CSS Viewport Units: vw, vh, vmin, vmax
Viewport-percentage lengths, or viewport units as they are more frequently referred to, are responsive CSS units that allow you to define dimensions as a
yes and no, its a max unit so it does not change dynamically like vh will.
web.dev
The large, small, and dynamic viewport units
New CSS units that account for mobile viewports with dynamic toolbars.
ohhhhh! Got it 😄 thank you!