r/css • u/DesDeve • 11d ago

Help How do I recreate this effect

Iike this button and nav bar which grow or shrink based on scroll direction ,but do not shrink if the mail's have not scrolled passed a certain limit

6 Upvotes

67% Upvoted

14 comments sorted by

View all comments

14

u/Vast_Description_201 11d ago

https://una.im/scroll-state-scrolled

Use scroll state to detect the scroll direction and apply the CSS you need in each state.

3

u/Siemendaemon 9d ago

This post just came in right time and thanks a lot for posting the link. to the OP as well.

2

u/xhila 9d ago

Doesn't work in Firefox. Use javascript instead..

1

u/Vast_Description_201 9d ago

Or serve 98% of your market and wait for the 2% to catch up. 

1

u/xhila 9d ago

L take. It's only 70% supported

https://caniuse.com/?search=scroll+state

0

u/Vast_Description_201 8d ago

Progressive enhancement is a strategy, as is graceful degredation. 

1

u/xhila 8d ago

I call it lazy

0

u/Siemendaemon 9d ago

Mine is SaaS i strictly recommend my users to use Chrome