Changing Logo Colour When Scrolling

Hi Guys,

Brand new to webflow and i have been searching everywhere for a solution to this but cannot find a 100% way to do it. I have a .png logo which is fixed when scrolling and my background changes from light to dark as you scroll through the 2 sections, how can i make my black .png logo switch to a white .png logo as i get into the new section of darker background and it reverts when i scroll back up???

I have managed to add 2 logos on top of each other one black and one white and i was trying to make the white logos opacity 0% then 100% when i get the the right section but no matter what i do the interaction just doesn’t work at all.

link below Please someone help!

Logo Change

Thanks in advance!