javascript - 如何将固定元素的颜色调整为其背景元素颜色？

Question

情况是我有一个网站，其中包含多个全宽内容容器，堆叠在高度轴 (Y) 上。其中每一秒都是蓝色的，每隔一秒是红色的。我想显示一个 SVG 图像或固定在左上角的按钮（随用户向下滚动）。此元素的填充颜色应动态反转为底层内容容器的背景颜色。当固定元素同时悬停在两个内容容器上时，必须相应地拆分其填充颜色。

当用户向下滚动时，固定元素（此文本下方图像中的圆形）应根据下面的背景元素调整其填充颜色。当圆圈完全覆盖红色内容容器时，它应该是蓝色的。当圆圈完全覆盖蓝色内容容器时，它应该是红色的。当它超过两个内容容器时，它应该拆分其填充颜色。

想法是为每个内容容器设置一个带有 position:fixed 的固定元素，并在内容容器上使用 overflow-y:hidden 来限制其“可见性”，但由于 position:fixed 将元素视口附加到窗口/主体，这解决方案似乎不起作用。

下一个想法是使用 position:sticky。固定元素成功停在了它的内容容器底线，但稍微超出了一点，并没有隐藏在底线之外的锐利切割效果。

另一个想法是使用 z-index 属性，但由于它只是一维的，我相信它不能达到目的。

蓝色圆圈下方应相应调整：

.fixed {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: blue;
}

.bg {
  height: 200px
}

.bg-red {
  background-color: red;
}

.bg-blue {
  background-color: blue
}

<div>
  <div class="fixed"></div>
  <div class="backgrounds">
    <div class="bg bg-red"></div>
    <div class="bg bg-blue"></div>
    <div class="bg bg-red"></div>
    <div class="bg bg-blue"></div>
  </div>
</div>

我会很高兴有一个提示可以引导我在这里找到解决方案。

标签： javascriptcss

Answer 1

由于您的背景颜色是“纯”红色和蓝色，因此混合混合模式差异是可能的。

使圆圈具有背景颜色#ff00ff。然后与蓝色（#0000ff）的区别是#ff0000，即红色，反之亦然。

.fixed {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: #ff00ff;
  /*ADDED*/
  mix-blend-mode: difference;
  
}

.bg {
  height: 200px
}

.bg-red {
  background-color: red;
}

.bg-blue {
  background-color: blue
}

<div>
  <div class="fixed"></div>
  <div class="backgrounds">
    <div class="bg bg-red"></div>
    <div class="bg bg-blue"></div>
    <div class="bg bg-red"></div>
    <div class="bg bg-blue"></div>
  </div>
</div>