我有一个固定的 div，它可以滚动某些元素。
当div位于某个div上方时，我不希望它具有特定的颜色和特定的图像。当它位于另一个 div 上时，我希望它改变颜色。
基本现场演示 http://jsfiddle.net/c2a4jg95/8/
我很确定为此我需要两个 div，其中一个是隐藏的。
我玩过z-index，但这似乎不能用如此基本的东西来解决。
更复杂的例子。 http://jsfiddle.net/c2a4jg95/22/
我玩弄这个属性：
.two {
background-color: green;
z-index: 250;
}
但命令似乎矛盾，
如果两个尺寸都是固定的，我可以使用 js 对与滚动图片相关的元素的像素高度进行一些魔法。
有没有办法解决？
您几乎正在考虑使用两个 div。诀窍在于您需要将它们制作在不同的容器中并依赖overflow:hidden并使用position:absolute在这种情况下不是固定的，但你需要一些 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>
这是一个相关的问题，我做了类似的效果：如何用CSS创建图像滚动混合效果？ https://stackoverflow.com/questions/48998036/how-to-create-image-scrolling-blend-effect-with-css/48998170#48998170
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
