Changing a component property on scroll

Hi Community.

I’m relatively new to Webflow and trying to figure out how to get my navbar animation to work.
Since I wanted my navbar to have a dark background on some of the pages and no background on others (where the background is anyway dark, like the home page), I created a ‘background’ div in my navbar component and set its visibility property to show and not show accordingly.

Now, I’m trying to set up the animation for the header to leave the view when scrolling down and return when scrolling up. I managed to do that pretty easily; however, on the pages I set the visibility property to “hide” I would like for the background to also “show” when scrolling beyond the dark hero image because otherwise, the header is not very visible on the bright background below.

I couldn’t find a way to trigger the property visibility in the animation panel, and I wonder if it is possible or if there’s a better way to do it.

Thanks for your help!

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