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
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
5 Replies
The mix blend mode you would want white text on white background and then have difference. So on a white background the difference is 0, black, and on a black background the difference is 255, white. And then you’d have another layer of just the dark teal with the blend mode lighten which will turn the black into the dark teal. You then have anything coloured above that dark teal layer
I’m on mobile so can’t do it rn
Thanks for the reply bro! But hmm, I am not sure that I am following. Can you please explain a bit more?
So the easiest solution is just to use a class to set background to be one colour and text to be the opposite, however this fails when it’s sticky.
The more complicated method that uses mix-blend-mode (assuming that you want this because the header is static and the sections below alternate colour and you want the header text to be the opposite) is to have everything as black and white and if you do the difference of white text on white or black it will produce the opposite, but then to deal with it being black and white rather than dark teal and white you then have dark teal covering everything and set to lighten this will turn the black into dark teal and it won’t affect white. However if you have any other colours used both of these mix-blend-modes will screw with it so they need to be raised up above everything.
Alternatively header just has a background and it also means that it’s readable when text is under it, alternatively you can use backdrop-filter and blur everything under it
I’ll have a go at making it once I’m back at my computer in a few hours if that wasn’t enough
Soo, I suppose that it is just easier to use javascript instead of plain css?
Yes but then you have where header text is half way between sections and no matter what half of the text is unreadable. However it’s acceptable considering that scrolling up or down a little bit it becomes readable.
Although you could have the text fade between the different values across the division so it’s always readable just not the most readable
Or you could use clip path and have a light and dark header and have JS move the clip