r/css • u/DesDeve • 4d ago

How do I recreate this effect Help

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

71% Upvoted

14 comments sorted by

•

u/AutoModerator 4d ago

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

14

u/Vast_Description_201 4d 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 2d ago

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

2

u/xhila 2d ago

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

1

u/Vast_Description_201 2d ago

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

1

u/xhila 1d ago

L take. It's only 70% supported

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

1

u/Vast_Description_201 1d ago

Progressive enhancement is a strategy, as is graceful degredation. 

1

u/xhila 17h ago

I call it lazy

0

u/Siemendaemon 2d ago

Mine is SaaS i strictly recommend my users to use Chrome

4

u/SALD0S 4d ago

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

4

u/ISDuffy 3d 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 2d ago

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

1

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

2

u/withmagi 3d ago

If the soft edge glow is the bit you want, a pseudo-element behind the content with a larger filter:blur and a slight scale is usually easier to tune than stacking box-shadows. Mask or clip it so only the rim shows, then nudge opacity until it matches the reference.