'Change text colour of scrolling logo

I have a sticky logo which when I scroll stays the same colour. I want the logo to initially be white and change colour only when the background is white to black... and stay black until it sees a darker background again and then go back to white. The problem with what I currently have is that mix-blend-mode: difference; changes to all sorts of colours as it inverts based on background.

.logo {
    color: white;
    filter: invert(1);
    mix-blend-mode: difference;
}
javascripthtmlcsssass


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions