Is it possible to ignore mix-blend-mode of the element?

Question

I have a component which has a "sticky" header at the top and list of elements that use blending modes. In this simplified example, it's headers inside divs.

It works fine until I scroll content. If I scroll down, blending mode also applies to blend "sticky" header with elements which is not what I want.

Is there any way to make a "sticky" header to ignore the blending modes of an another element and always just cover the elements behind.

See code below.

<div>
    <div style="display: flex; flex-direction: column; height: 700px; max-height: 700px; overflow: auto; text-align: center;">
        <div style="position: sticky; top: 0px; background: blue;">Sticky</div>
        <div style="background: lightblue;">
            <h1 style="background: red; mix-blend-mode: multiply;">ABC</h1>
        </div>
        <div style="background: lightblue;">
            <h1 style="background: red; mix-blend-mode: multiply;">ABC</h1>
        </div>
        /* a lot of other elements like 2 above*/
    </div>
</div>

Answer 1

you just have to add z-index: 1000; on Sticky style

.class_Parent {
  display: flex;
  flex-direction: column;
  height: 700px;
  max-height: 700px;
  overflow: auto;
  text-align: center;
}
.class_Sticky {
  position: sticky;
  top: 0px;
  background-color: blue;
  z-index: 1000;
}
.class_ABC {
  background: lightblue;
}
.class_ABC h1 {
  background: red;
  mix-blend-mode: multiply;
}

<div>
  <div class="class_Parent">
    <div class="class_Sticky">Sticky</div>

    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>

  </div>
</div>