Nav background colour change x 3

Hey hey webflowers!

So basically on my home page I need my nav to go through 3 colour changes:

Transparent (on the 100% VH first screen)
Linen (throughout the project section with the linen background)
Dark Grey (on the journal section with the dark grey background)

It’s so close to working.

I’ve set up scroll interactions to trigger the the colour changes, however on the final interaction when scrolling back up the page and the menu turns back to the linen colour, it has affected the initial transparent BG that the nav needs to start with. I can understand why it’s happening because the trigger element has scrolled off screen but I can’t think how to get around it.

Here is the link:

https://preview.webflow.com/preview/alice-megan-creative?utm_medium=preview_link&utm_source=designer&utm_content=alice-megan-creative&preview=3915d8aa710792b40858b17bb6fee92e&mode=preview

If you scroll down and back up it transitions correctly back to transparent but I need the initial state to be transparent too.

I’m not sure I’ve explained this very well but if anyone could help me I would be forever grateful!!!

Please and thank you :hugs:


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