Hide element on scroll / Change color on scroll

I have a pinned logo on the left side of the page. The logo is white, but I want it to change color when the background is white. Probably easiest triggered by an anchor.

I have thought of two possible solutions, but I can’t seem to find a piece of code that would do the trick.

One is having it as a vector and changing the physical color of the element when scrolled past the anchor by using srgb codes.

Or simply pin a logo with a different color underneath, and hide the white logo (showing the other color) on scroll.

I want this to happen several places on the page. Like shown under here.

Can anyone help me with changing the color of my logo on scroll?

Thanks!