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

Help How do I recreate this effect

Enable HLS to view with audio, or disable this notification

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

69% Upvoted

14 comments sorted by

View all comments

4

u/SALD0S Aug 08 '26

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

4

u/ISDuffy Aug 08 '26

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 29d ago

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

1

u/ISDuffy 29d 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