Streaming live at 10am (PST)

Change header color when scrolled back to the top

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

Great question and awesome work on getting the scroll up/scroll down interaction on the navbar @davstolarik :grinning_face_with_smiling_eyes:, 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! :grinning_face_with_smiling_eyes:

1 Like

Hi Waldo,

thanks for your help. It works!


This post was flagged by the community and is temporarily hidden.