Symbol background colour change on page scroll only works on the original creation page

I made a new navigation system with standard Webflow components and styled it. The mobile menu has a background colour change on page scroll down that works fine in the page (home-page-test) where I made it only.
I made the nav into a symbol then applied to all pages but the background colour change is not working on any other page instance of the symbol.
If I duplicate the page the effect works fine but when I add the symbol to other pages it doesn’t work.
When I view the source code the inline styles are not being applied or triggered so I’m asking if anyone else has had this issue or knows a fix?
Thanks.

This is how it should look:

Working example on page load:

Working example on page scroll (adds/triggers the inline style change):

Not working example on page load:

Not working example on page scroll:

https://preview.webflow.com/preview/symbio-global?utm_medium=preview_link&utm_source=designer&utm_content=symbio-global&preview=5b15b0bfae78f8db0ae7ede6c52a661f&workflow=preview