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

Question

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

www.sevenly.org

Answer 1

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

演示

http://jsfiddle.net/RjGsM/

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

这个效果是通过给你的 body 元素添加一些内边距（sevenly.org 使用 600px - about right），然后在背景中绝对定位一个元素来实现的。