Simple Nav Bar color on scroll?

Design help General
1

I am rebuilding a website in WF that I had previously built on another platform.

I am trying to get the pinned navbar to have a clear background (with visible text) at the top of the page but then transition to a colored background when the page is scrolled down.

On the contrary, I would like for the navbar to keep the colored background throught the entire page transition until it returns to the top of the page again where the background becomes clear.

I have found help regarding this throughout the forum, however, the threads seem to be somewhat dated and before the newest animation updates so I am not sure if there may be a better way.

Any help would be greatly appreciated! Thanks!

Here is what I am trying to achieve:
http://dubsbarbell.com/

Here is my live link:
https://dubsbarbell.webflow.io/

Here is my site Read-Only: https://preview.webflow.com/preview/dubsbarbell?utm_medium=preview_link&utm_source=dashboard&utm_content=dubsbarbell&preview=51279f844dc5e22ada1daa899b5b851b&mode=preview

2

Hey there :slight_smile:

I made a video and uploaded it on youtube to help you out with the interaction that you’re trying to achieve, please check it out - Navbar Background Change on Scroll | Webflow Tutorial - YouTube

Steps:

  1. Set the top section as the trigger for ‘Scroll into view’ animation.
  2. Start a new animation for when top section is scrolled into view, name it navbar-transparent. This is because we want the navbar to be transparent on the top section.
  3. Select the navbar and add an action to make the BG Color transparent.
  4. Close the timeline, and set the offset to 75%
  1. Start a new animation for when top section is scrolled out of view, name it navbar-opaque (Obvious reason to name it that)
  2. Select the navbar and add an action to make the BG color to whatever color you want the navbar to have.
  3. Close the timeline, and set the offset to 75%, just like the last time

Watch the magic happen :muscle:t3:

P.S. You can play with the offset values to get the desired results

2 Likes
3

@Keshav_Sharma On behalf of myself and many others, I’m sure, THANK YOU!!! Great explanative video!

1 Like