[SOLVED] mix-blend-mode sticky position

mix-blend-mode sticky position

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>

Solution

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