Ancestors

Toot

Written by Adam Argyle on 2024-12-30 at 21:12

[#]CSS feature faceoff:

scroll triggered stuck nav (left)

   vs

scroll driven animation nav (right)

which do you prefer?

try it

https://codepen.io/argyleink/pen/gbYGgrB

(use Canary for the scroll-state() support)

=> View attached media

=> More informations about this toot | More toots from argyleink@front-end.social

Descendants

Written by Ryan Geyer (he/him) on 2024-12-30 at 21:19

@argyleink in terms of delight, I would probably be more likely to notice the one on the right and play with it by scrolling up and down, while the left feels less attention-grabbing. But you don't always want a nav bar to be attention-grabbing so I think both approaches have a place!

=> More informations about this toot | More toots from gyanreyer@fosstodon.org

Written by Adam Argyle on 2024-12-30 at 21:24

@gyanreyer "both have a place" is where I'm at too! gotta assess the situation and choose

=> More informations about this toot | More toots from argyleink@front-end.social

Written by Roma Komarov on 2024-12-30 at 22:49

@argyleink I prefer the SDA one, but I'm biased :) https://kizu.dev/scroll-driven-animations/#stuck-states-for-the-sticky-headers

=> More informations about this toot | More toots from kizu@front-end.social

Written by niu tech on 2024-12-31 at 09:52

@argyleink I prefer when the nav bar is always visible in white, so I can immediately see the menu button without scrolling.

=> More informations about this toot | More toots from niutech@fosstodon.org

Written by Adam Smith on 2025-01-01 at 06:15

@argyleink I like the left one the best. Mostly because I think the text and hamburger button should be white against that dark background when the header is transparent. Therefore, when transitioning those from white to black gradually when scrolling down, it would make them difficult to read during the transition.

=> More informations about this toot | More toots from burkybang@mastodon.social