Changing Sticky Nav from transparent to white on scroll

Design help Animations & Interactions
1

Hey there,

I have a transparent sticky_navbar on the homepage that, on scroll down, needs to change to white. Also, the elements on the navbar (logo, links, burger icon) also change colour. So they are white on a transparent background at first and then turn to grey on white background.

I’ve already created these 2 navs and at the moment they are both on the page. I’ve tried all tutorials and help I could find on Webflow but none seems to work for me.

Could someone help, please?

Here is my public share link: https://preview.webflow.com/preview/uk-vein-clinic?utm_medium=preview_link&utm_source=designer&utm_content=uk-vein-clinic&preview=3ffbef8dd62aab3e8b1a544444d63db3&mode=preview

Many thanks,
Luciene

2

@Luciene_Calabria

  • select your “container 5” and replace with a “div”. ( Container components are only good for center your page)
  • put a new “div” in “container 5” call it “BG”
  • set “BG” to “absolute” “full” and a negativ “z-index”
  • set color to “white”
  • create a new “While page is scrolling” interaction
  • select your “BG” and set @ 0% opacity to “0%” and @ 3% opacity to "100%
  • select your elements you want to change and set @ 3% a new “BG-color”
3

Thank you Matthias. Very helpful, I’ll try it.

I’ve also found this tutorial to try. Transparent NavBar that turns opaque on scroll