当div覆盖另一个div时，模拟颜色的变化 [英] Simulate change of color when div overlays another div

问题描述

我有一个固定的div，可以滚动某些元素。

I have a fixed div, which scroll over certain elements.

当div超过某个div时，我想要它有一定的颜色和一定的形象。当它超过另一个div时，我希望它改变颜色。

When the div is over a certain div, I wan't it to have a certain color and a certain image. When it's over another div, I want it to change color.

基本现场演示

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

I'm pretty sure that for this i will need two divs, one is hidden.

我玩 z-index ，但这似乎不能解决这些基本问题。

I played around with z-index, but this doesn't seem, to be solvable with such basic stuff.

更复杂的例子。

我玩这个属性：

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

但订单看似矛盾，

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

If both sizes are fixed, I could use js to do some magic to the height of the pixels of the element related to the scrolled pic.

是不管怎么说呢？

推荐答案

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

You are almost close thinking about using two divs. The trick is that you need to make them in different containers and rely on overflow:hidden and use position:absolute intead of fixed in this case but you need some JS to control the position so it behaves like fixed:

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>

这是一个相关问题，我做了类似的效果：如何使用CSS创建图像滚动混合效果？

Here is a related question where I have done a similar effect : How to create image scrolling blend effect with CSS?

这篇关于当div覆盖另一个div时，模拟颜色的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！