I am little new to CSS and web development. Currently, I have a requirement for creating a fixed header with a logo for a website. The logo is a white png (can change logo color) and fixed header background is transparent. The client want to change the logo color to black when scrolling down and the background is white, and to change the logo color to white when scrolling down and the background is black. I did it easily using css mix-blend-mode difference.
/* CC for Fixed Header*/
.fixed-header {
position: fixed;
width: 100%;
height: 80px;
background-color: transparent;
z-index: 999;
mix-blend-mode: difference;
}
And I didn't apply mix-blend-mode for logo. But now the problem is, when we scroll over any image or any colorful area, the logo color varies from sepia and other colors. All I want to do is, when we scroll down, the logo should white on black background, logo should black on white background and the logo should white over color and image backgrounds. How can I achieve this? Thank you in advance..!