在另一个元素上滚动/下方时更改文本的颜色？

Question

我不确定这种效果的正确术语是什么。我想说它是混合模式或剪切路径的东西。我想要做的是当文本在另一个元素上滚动（或在其下）以使文本改变其颜色时。请参阅下面的示例图片..

因此默认情况下文本是浅灰色的，然后当它在下面滚动时（或者结束时，不确定它应该堆叠的方式）灰色条纹文本变黑。

我知道我之前已经看过这件事，但我不记得所使用的财产被称之为。

Answer 1

我认为您所寻找的是mix-blend-mode，但Browser Support仍然非常糟糕Fiddle。

body {
  height: 1000px;
}

.text {
  text-transform: uppercase;
  position: absolute;
  top: 80%;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  width: 100%;
  color: gray;
  z-index: 2;
  left: 0;
  mix-blend-mode: difference;
}

.box {
  width: 60%;
  position: fixed;
  transform: translate(-50%, 0);
  z-index: 1;
  left: 50%;
  top: 0;
  height: 100px;
  background: #AAAAAA;
}

<div class="box"></div>
<div class="text">Lorem ipsum</div>

Answer 2

你的意思是这样的吗？：

<div style="position:absolute; top:0; left:0; bottom:0; right:0; overflow:auto;">
  <div style="height:1000px; background-color:#ccc">
    <br/><br/>EXAMPLE<br/>EXAMPLE<br/>EXAMPLE
  </div>
</div>
<div style="position:absolute; top:0; left:0; height:50px; right:16px; background-color:white; opacity:0.5">
</div>

示例：https://jsbin.com/bexafinuti/edit?html,output

可以使用css opacity进行该功能。在具有白色背景和半透明度

的绝对定位div下滚动时内容变为灰色