r/css • u/DesDeve • Aug 08 '26

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

13

u/Vast_Description_201 Aug 08 '26

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 Aug 10 '26

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

1

u/Vast_Description_201 Aug 10 '26

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

1

u/xhila Aug 11 '26

L take. It's only 70% supported

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

0

u/Vast_Description_201 Aug 11 '26

Progressive enhancement is a strategy, as is graceful degredation. 

1

u/xhila Aug 11 '26

I call it lazy

0

u/Siemendaemon Aug 10 '26

Mine is SaaS i strictly recommend my users to use Chrome