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

Question

In this example, they somehow are able to scroll the top layer in the browser to cover over the bottom layer div. How can that be done with jquery/CSS?

www.sevenly.org

Answer 1

Here's an idea how you can achieve this. You can improve this to your needs. The background layer is fixed as well as the <nav> -element. All elements have different values for z-index to make the content scroll between the background and navigation.

Demo

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

Add {position: fixed} to the "layer" (div) you don't want to be scrolled. Make sure it's z-index is lower than the divs that do scroll.

But be warned, the mobile compatibility for this isn't great :)

Answer 3

通过在您的body元素中添加一些填充来实现此效果（sevenly.org使用600px - 大约右侧），然后将元素绝对定位在背景中。