Post

agreed!

In this example, I'd probably go for the right because the scrolling happens purely over that one image, feels smoother with the velocity of the scroll. If the change would be more subtle such as a shadow or more elements such as text underneath were involved, probably left.

I like the left one more, personally.

I might chose either, depending on the site, but I do quite prefer the right one. It feels like the nav is somehow more connected/part of the page, rather than something totally autonomous, that’s just pretending to interact with the rest of the page.

never make things scroll driven, it just confuses the end user

def gonna be a left for me, even if the requisite scroll distance were vastly reduced on right

FWIW a few months ago I've experimented with all kinds of fixed header nav transitions and in the end found them all distracting. I decided for our site, the nav is not going to be fixed. Which is saving me some headaches in case flyout menus are tall, too!

Me, the one on the right 👌

Right. At real world scrolling speed, it’ll give a nice animated fade in that will draw the eye just enough.

If I'd use this, I'd probably mash these two examples together that when you're going upwards, I change the animation for the transition one and when you've reached the top, I'd use the scroll timeline to fade the bar in when the bar has been made transparent.

Right is certainly less distracting/annoying.

Definitely left, but preferably triggered by some offset 🙈

Left one

My preference is the right side, since that's kind of more how my brain is expecting it to behave. I think it makes more sense to go with the left, since it's a direct, immediate indication that you are no longer at the top of the page. I guess: Right prettier, but left more accessible? (imo)

Left!

Looks nice, but triggers my A11y alert. Not a fan of the title becoming hard to read, it's more pronounced when the fade is related to scroll speed.

Definitely the one on the left.