mix-blend-mode sticky position

Question

I'm trying to get my Hello World to be affected by the red background color as it slides behind, how can this be achieved, if possible at all? The text should change color as the below element slide behind the text

 body { height: 150vh; background: #000; } h1 { mix-blend-mode: difference; color: rgb(255, 255, 255); z-index: 2; }.top { position: sticky; top: 0; height: 50vh; z-index: 1; }.bottom { background: rgb(232, 12, 12); position: sticky; top: 0; height: 50vh; position: relative; isolation: isolate; }

 <div> <div class="top"> <h1>Hello World</h1> </div> <div class="bottom"></div> </div>

Answer 1

for the mix-blend-mode to work apply it like this

 body { height: 150vh; background: #000; } h1 { color: rgb(255, 255, 255); z-index: 2; }.top { mix-blend-mode: difference; position: sticky; top: 0; height: 50vh; z-index: 1; }.bottom { background: rgb(232, 12, 12); position: sticky; top: 0; height: 50vh; position: relative; isolation: isolate; }

 <div> <div class="top"> <h1>Hello World</h1> </div> <div class="bottom"></div> </div>

some one in your comment section also said the same thing - Dai