如何用鼠标滚动在其他div后面显示一个div



我正试图做一个效果,将一个div隐藏在其他类似页面后面:Canalla Agency。我使用了两个div和最后一个固定位置的div,这很有效,但div失去了高度。

很抱歉我的解释,但我不擅长CSS定位和Javascript。我希望你能帮助我,尽快见到你。谢谢

具有三个<div>的解决方案:

唯一棘手的地方是"查看器"div创建滚动空间来查看背景div

不需要JS!

还记得在使用z-index时指定position

<html>
<style>
#cover, #viewer, #background {
box-sizing: border-box;
position: relative;
padding-top: 50vh;
text-align: center;
height: 100vh;
width: 100%;                
}
#cover {
background-color: paleturquoise;
z-index: 1;
}
#viewer {
z-index: -1;
}
#background {
background-color: coral;
position: fixed;
top: 0;
left: 0;
}
</style>
<body>
<div id="cover">
<h1>This Scrolls Up</h1>
</div>
<div id="viewer"></div>
<div id="background">
<h1>This Stays Static</h1>
</div>
</body>
</html>

最新更新