Here is the scenario:
I have created a sticky div which contains two other divs. Sticky works perfectly and I’m really pleased with it, BUT
the first contained div has a blend mode set to difference, so the text picks up the difference between the text colour and the background image
the second contained div had a backdrop filter set to blur which sets a blur on the background of the div over the image.
This all works perfectly until I set the parent div to sticky and I loose both the blend and backdrop filter from the contained divs.
If I set the sticky div back to relative, the backdrop and blend mode are both applied as expected.
I can set a blend mode on the sticky div (with sticky applied), and this applies the blend to both the child divs which is not what I want.
I have read everything I can find about sticky and how this works but nothing I have found can solve these issues. I’ve been messing around with z-index to try and stack everything properly but no luck. And I’ve wasted so much time of this!!
Any help would be great thanks!
UPDATE:
I have the backdrop:blur working on all the role divs which is what I want, but cannot apply any type of blending mode to div-title. I know it must be a stacking issue, but I just can’t see it.
No, the issue relates div-sticky and the items it contains.
The div holding the text (div-title) should have a Blending mode of difference and each of the role divs should have a Backdrop filter of blur(20px).
I cannot get div-title and role to have different effects within div-sticky. Maybe this is just a CSS thing but I’ve spent ages trying to get this to work.
This is the effect I want and this works if I set div-sticky positioning to relative. But as soon as I set div-sticky to position sticky, I div-text loses the Blending mode effect.
Yeah you cna get that effect, you just need to pull out .div-title out of .div-sticky and make that element sticky. THe reason it’s not working is something to do with layers. It needs to be right above the image in order to set it to difference I think.
After that just adjust both to be sticky and adjust pixels precisely so that both scroll in the same time and for the top one add a bottom margin which is the same height as the bottom element to stop at the right time above that one.
Let me know if you need any other help with that but it should cover it
Thanks. I had already tried that and it’s a real pain to get the margins correct, but it looks like that’s the only option. What throws everything off is that the .title text may wrap, so the margins don’t seem to work as they are fixed and can’t take the change in height of .div-title into account. Is this correct, or am I still missing something?