Streaming live at 10am (PST)

Menu bar change color when scroll down

Hey there,
I checked webflow template and saw the menu bar (pics below). At first the menu bar has transparent background (i forget what’s that called) and when you scroll down it’s become fix. This is exactly what I want to do with my site. Do you know how to do that?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)


I guess making the menu bar sticky would work for making it fixed when scrolling
and for the color you can add a page interaction while page is scrolling to change the color.

I’m here here! Can you please show video demonstration?

Sorry, I cant make a video at the moment, To change color, use the page interaction while scrolling.

Follow the above video, but replace the trigger to While page is scrolling and animations to background color.

add two bg color keyframes:

1st at 0% with bg color set to transparent or the color you want.
2nd at 4% (set % accordingly when you want the color to change) with bg color set to the color you want.

the percentage denotes how far you have scrolled
0% = at the top of the page, 100% = bottom of the page, 50% = middle of the page.

Hope this helps.

I did it! Is it possible to add gradient color in this case?