Menu bar starts transparent but fill color changes on scroll-down

Design help General
1

Hi guys!!

I would like to create a menu that behaves like the menu on this page: https://www.palantir.com/

Specifically that the menu starts with no fill, and then changes color on scroll down. On our page: http://www.grooooow.com the menu is black with some transparency and is fixed on scroll down, but I’d like it to be transparent and then on scroll down change to white transparent, and remain fixed. Then on scroll-up to top, revert back to no fill color.

I have searched the forums and video tutorials, but can’t find any joy!! Please could you help?!

Thanks very much for any help you can offer !!!

Daniel.

1 Like
2

That’s an easy one with Webflow. It’s just about setting an on-scroll interaction. Interactions can make things vary in opacity, but not change color. So in your case it should be easy. To make a color change on interaction it’s a bit trickier but still possible.

Can you please share your project’s public link so it’s easier to help?

Learn how to do it here: http://help.webflow.com/sharing-your-public-webflow-site-link

3

Hi Vincent, thanks for your response. the public link is: https://webflow.com/design/grooooow?preview=752537447391fc9182fa59423f678582

4

Google Chrome – Tapes here’s my try

removed your emtpy div
increased top padding of fisrt section
make your menu transparent
add a absolute 100% div as a background, put black as bg, set opacity to zero
create interaction on the first section that is set on scoll to modify another element : the menu background div