Question

在这个例子中，他们以某种方式能够滚动浏览器中的顶层以覆盖底层div。如何用jquery / CSS完成？

www.sevenly.org

Answer 1

这是一个如何实现这一目标的想法。您可以根据自己的需要进行改进。固定背景图层以及<nav> - 元素。所有元素都有z-index的不同值，以使内容在背景和导航之间滚动。

<强>演示

<强> HTML

<div class="background"></div>
<nav></nav>
<div class="content"></div>

<强> CSS

div.background {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin-top: 50px;
    background: red;
}

div.content {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    margin-top: 300px;
    background: blue;
}

nav {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background: black;
}

Answer 2

将{position：fixed}添加到您不想滚动的“图层”（div）。确保它的z-index低于滚动的div。

但请注意，移动兼容性并不是很好:)

Answer 3

这种效果是通过向你的身体元素添加一些填充来实现的（sevenly.org使用600px - 大约右边），然后将一个元素绝对定位在背景中。

如何在浏览器中仅滚动顶层以覆盖底层？

3 个答案: