Animate background color of navbar when scrolling

Design help Animations & Interactions
1

Hello
I’m trying to achieve a common behavior where the navbar background starts transparent when the page loads, and then a background color is added when the page is even slightly scrolled.
I used an empty div right below the navbar and put a scroll-into-view trigger on it, to replace the background color, which works great.

One problem I encouter is when the page loads and it’s already scrolled - in this case, the animation doesn’t trigger, and I’m left with the original background color and not the one I wanted for this kind of state.
How can this be solved?

Thank you

2

Try adding the animation to the page itself under page interactions.

On there you can create a copy of the interaction you have for scroll into view but append it to “While page is scrolling” and set it to 1% of the page. That should cover you, let me know if you got it or if you need some more help

3

Thank you, it works!
However, isn’t this an overkill and can damage performance?

4

Not really, it can impact performance if you go overboard with what you are doing on scroll but if you are just doing the color it should be good!