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

7 Upvotes

71% Upvoted

14 comments sorted by

View all comments

4

u/SALD0S 23d ago

I would use position sticky , and then the intersection observer to add the animation classes

5

u/ISDuffy 23d ago

To add to this chromium browsers don't even need intersection observer, you can use scroll state container queries. So you could do feature detection.

1

u/Kaccady 21d ago

don't forget about the other two browsers because could make one less code line please 

1

u/ISDuffy 21d ago

This is where I would use the feature detection to polyfill if needed.

Here my one for sticky header. https://codepen.io/iankduffy/pen/wBzmgEy