[FIXED] How to change button color based on background?

Issue

I write in React. On the page I have a scroll up button.

src="https://i.stack.imgur.com/MKAeM.png" alt="enter image description here" />

When scrolling on some blocks, it is not visible due to the fact that the colors match.

How to make it so that when it touches certain blocks of the same color as the button, it turns white.

How to track the contact of a button with a specific block? What listeners to put?

Solution

Since the button is probably position: fixed or position: absolute, the easiest solution would be to give CSS property mix-blend-mode a try, instead of listeners, as there is no accurate way of telling the position w.r.t to background. Check this Try to give mix-blend-mode: difference; for the scroll to top button. Although I think in this case you will have the color yellow for the button when it overlaps blue.

Answered By - Sanjay
Answer Checked By - - Mary Flores (ReactFix Volunteer)