混合模式粘着位置

Question

我试图让我的Hello受到红色背景颜色的影响，因为它在后面滑动，这是如何实现的，如果可能的话？当下面的元素滑到文本后面时，文本应该改变颜色

​

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

混合模式的工作方式如下所示

​

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>

​

在你的评论部分，有一个人也说了同样的话-戴。