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;
}