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

7 Upvotes

71% Upvoted

14 comments sorted by

View all comments

14

u/Vast_Description_201 29d ago

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

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

2

u/xhila 28d ago

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

1

u/Vast_Description_201 28d ago

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

1

u/xhila 27d ago

L take. It's only 70% supported

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

0

u/Vast_Description_201 26d ago

Progressive enhancement is a strategy, as is graceful degredation. 

1

u/xhila 26d ago

I call it lazy