如何解决视差效果:一个 div 覆盖另一个 div?
我的 HTML 代码如下所示:
<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>
我希望第二个 <div>
b
出现在 <div>
a
之上,以及 <div>
和 id
{{1 }} 出现在 d
<div>
之上。两个分区大小相同,我尝试在第一个c
position:fixed
中添加top:0
和<div>
但是没有得到我想要的效果,第一个{每次出现 id
时都会重复 {1}}。我知道这个问题来自 <div>
并且我不知道如何解决它(使第一个 <div>
在每次滚动后不重复,而是获得所有分区的视差效果)。
我针对我的问题做了一个演示:http://jsfiddle.net/1g8sLnfk/5/
解决方法
使用 position: absolute
而不是 position:fixed
html,body {
padding:0;
margin:0;
background:black;
}
.panels {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
}
#a{
background-image:url("https://www.w3schools.com/css/img_lights.jpg");
color:red;
top:0;
background-attachment: fixed;
z-index: 1;
}
#b{
background:yellow;
top: 100vh;
z-index: 2;
}
#c{
background:pink;
top: 200vh;
z-index: 3;
}
#d{
background:green;
top: 300vh;
z-index: 4;
}
<div id="wrapper">
<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。