Change header color when scrolled back to the top

Design help Animations & Interactions
1

Hello guys,

I was trying to achieve a header effect, so when the page is scrolled up – hide the header, and when the page scrolled up – show header. It all went pretty well I guess, but I am struggling to change the header color back to transparent when the page reaches the top.

Any ideas on how it would be possible to set?

Here is my public share link: Link

2

Great question and awesome work on getting the scroll up/scroll down interaction on the navbar @davstolarik :smile:, I’m glad that you’re here!

I would recommend creating a scroll into view interaction for the color change and use the Hero section to define when you’re scrolling into view or out of view.

First, you’ll want to remove this interaction:
Shared with CloudApp

Here is a video walking through this interaction:

I hope that this is helpful, happy designing! :smile:

1 Like
3

Hi Waldo,

thanks for your help. It works!

David