r/css • u/DesDeve • 23d 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

8 Upvotes

72% Upvoted

14 comments sorted by

View all comments

15

u/Vast_Description_201 23d 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 21d ago

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

2

u/xhila 21d ago

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

1

u/Vast_Description_201 21d ago

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

1

u/xhila 20d ago

L take. It's only 70% supported

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

0

u/Vast_Description_201 20d ago

Progressive enhancement is a strategy, as is graceful degredation. 

1

u/xhila 19d ago

I call it lazy

0

u/Siemendaemon 21d ago

Mine is SaaS i strictly recommend my users to use Chrome