如何通过鼠标滚动在其他 div 后面显示 div

Question

我正在尝试制作一种将 div 隐藏在其他页面后面的效果，例如此页面：Canalla Agency。我使用了两个 divs 和最后一个位置固定的，它起作用了，但是 div 失去了高度。

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

Answer 1

三个 <div> 的解决方案：

唯一棘手的一点是 "viewer" div 创建滚动 space 以查看背景 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>

如何通过鼠标滚动在其他 div 后面显示 div

How to show a div behind other div with the scroll of the mouse

javascript

css

css-position