Sticky header dynamic color per section
Hello guys,
I have one interesting problem which I am not yet sure how to solve. On a website I am working on, I have two primary colors (dark green and light blue).
I want the color of the text in my sticky header to switch between these two primary colors based on the background (If I can set which color to use on which section it would be awesome).
I was playing with the
There is also one criteria that when the sticky header is on the border of two sections (one light, one dark) the header text have two colors (the upper part of text according to the upper section and the bottom part of the text according to the color of the bottom section).
Image 1 - Expected behavior on a dark section
Image 2- UNexpected behavior on the light section
Image 3 - Expected behavior on a light section
I have one interesting problem which I am not yet sure how to solve. On a website I am working on, I have two primary colors (dark green and light blue).
I want the color of the text in my sticky header to switch between these two primary colors based on the background (If I can set which color to use on which section it would be awesome).
I was playing with the
mix-blend-mode property but it doesn't really suit my needs since I cannot say which two colors to use.There is also one criteria that when the sticky header is on the border of two sections (one light, one dark) the header text have two colors (the upper part of text according to the upper section and the bottom part of the text according to the color of the bottom section).
Image 1 - Expected behavior on a dark section
Image 2- UNexpected behavior on the light section
Image 3 - Expected behavior on a light section
