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

在本例中，他们可以在浏览器中滚动顶层以覆盖底层div。如何使用jquery/CSS实现这一点

---

将{position:fixed}添加到您不希望滚动的“层”（div）中。确保它的z-index低于确实滚动的div

---

但是请注意，这方面的移动兼容性并不是很好：）

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

下面是一个如何实现的想法。您可以根据自己的需要对此进行改进。背景层和

-元素是固定的。所有元素都有不同的z-index值，以使内容在背景和导航之间滚动

演示

HTML

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

---

我还想了解他们是如何以这种方式设置滚动动画的。非常感谢。使用绝对定位的div（AP div），其中包括z轴x。2个以上的部分如何？（更多

.content

）

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;
}