javascript - 当div覆盖另一个div时模拟颜色变化

Question

我有一个固定的 div，它在某些元素上滚动。

当div 超过某个div 时，我不希望它具有某种颜色和某种图像。当它位于另一个 div 上时，我希望它改变颜色。

Basic live demo

我很确定为此我需要两个 div，一个是隐藏的。

我试过 z-index，但这似乎无法用这些基本的东西解决。

More complex example.

我玩这个属性:

.two {
  background-color: green;
  z-index: 250;
}

但命令似乎自相矛盾，

如果两个尺寸都是固定的，我可以使用 js 对与滚动图片相关的元素的像素高度做一些魔术。

有什么办法吗？

Answer 1

您几乎在考虑使用两个 div。诀窍是你需要将它们放在不同的容器中并依赖于 overflow:hidden 并在这种情况下使用 position:absolute 而不是 fixed 但你需要一些 JS 来控制的位置，所以它的行为就像固定的:

window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}

:root {
 --scroll-var:0;
}

.container {
  height: 150px;
  outline: 1px solid red;
  position: relative;
  overflow:hidden;
}

.fixed {
  position: absolute;
  top:var(--scroll-var,20px);
}

.only-one{
  background-color: lightblue;
}

.only-two{
  background-color: lightgreen;
  margin-top:-150px; /*The height of the previous section*/
}

.overlay {
  position:absolute;
  width: 100%;
  height: 100%
  
}
.one {
  background-color: yellow;
}

.two {
  background-color: green;
}

<div class="container">
  <div class="overlay one">
    
  </div>
  <div class="fixed only-one">
    <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
  </div>
</div>
<div class="container">
  <div class="overlay two">
    
  </div>
    <div class="fixed only-two">
    <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
  </div>
</div>
<div class="container">
  <div class="overlay three">
    
  </div>
</div>
<div class="container">
  <div class="overlay four">
    
  </div>
</div>

这是一个相关的问题，我在其中做了类似的效果:How to create image scrolling blend effect with CSS?