Streaming live at 10am (PST)

Sticky navbar scroll interactions

Hi, I just started using WebFlow, and loving it a lot so far!

I’m trying to have a sticky navbar, which is easy, but I want it’s background color to change on down/top scroll, much like the navbar. I tried doing it with the page scrolled interactions (demo link shared below).

As you’ll see, the scroll-down works fine, but scroll-up resets the background too quickly. So the problem is how to have the background reset to original only when it reaches the top (as initally on page load).

I’ll appreciate any suggestions.

Here is my public share link: LINK
(how to access public share link)

This should help Fixed navbar colour change on scroll down

Basically you create an interaction on the top of the page to show a separate div that is the navbar background.

I tried to reuse Vincent tutorial but it doesn’t work well for me, don’t know what I did wrong…
Could you help?
Here’s my project