Question

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

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

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

我和z-index一起玩耍，但是用这些基本的东西并不能解决。

我玩这个财产：

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

但是订单似乎矛盾，

如果两个大小都固定，我可以使用js对与滚动图片相关的元素的像素高度进行一些魔术处理。

反正还有吗？

Answer 1

如果您需要颜色对背景颜色做出反应，则可以使用mix-blend-mode：

mix-blend-mode CSS属性描述元素的内容如何应与元素的直接父元素和元素的背景。

注意：IE / Edge不支持

.container {
  height: 150px;
  outline: 1px solid red;
}

.fixed {
  position: fixed;
  background-color: lightblue;
  mix-blend-mode: luminosity;
}

.one {
  background-color: yellow;
}

.two {
  background-color: green;
}

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

Answer 2

您几乎要考虑使用两个div。诀窍是，在这种情况下，您需要将它们放在不同的容器中并依靠overflow:hidden并使用position:absolute int固定值，但是您需要一些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?

Answer 3

检查一下：

https://jsbin.com/wozedar/edit?html,css,js,output

或更重要的一点是，将此功能用作所需功能的基础：

function isOnTopOf(a, b) {
  var fixedCoord = a.getBoundingClientRect(); 
  var bgCoord = b.getBoundingClientRect();

  if (fixedCoord.top + fixedCoord.height >= bgCoord.top) {
      return true;
  }

  return false;
}

要比较元素，在您的情况下，您可能会在每次滚动时执行以下操作：

var fixed = document.querySelector(".fixed-div");
var div1 = document.querySelector(".div--1");

if (isOnTopOf(fixed, div2)) {
   fixed.classList.add("fixed-div--light");
}

函数element.getBoundingClientRect()为您提供相关信息，您可以从中确定对象是在上方，下方还是上方。

只需将事件侦听器添加到窗口对象并比较每个滚动上的位置，您就可以开始了。如果您想做更复杂的事情，也许可以考虑使用throttling滚动功能，但是这个jsbin应该可以帮助您。

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

3 个答案: