Nav Bar background color change on scroll

Does anyone have some ideas on how to efficiently achieve this type of nav bar:

Here’s what I currently have working. It’s close, except for when you are in the ‘hero’ section or you’re scrolled to the top of the page, the background is now white, that’s what I can’t figure out: how to remove the white background when in the hero section or top of the page.

It’s basically doing this via Interactions:

  • Initial state has a transparent background
  • Hiding the nav when scrolling down
  • Showing the nav when scrolling up and adding a background color

Any help appreciated! Thanks

Here is my public share link: LINK

Bump. I haven’t had any luck - anyone have some ideas? Thanks

Solution in case anyone else comes across this.

I started by solution based on this tutorial and jeffjeanbap’s answer in this post:

But I actually ended up combing the two. So essentially I did the tutorial video, then added another interaction that was “while page is scrolling” that just controlled the background color. I also made the background color start at 4% down the page instead of 1% like jeffjeanbap suggested as the 1% was choppy looking to me.


Great! Closing the topic :webflow_heart: