Animate background color of navbar when scrolling

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

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

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

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!