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

Question

在这个例子中，它们以某种方式能够滚动浏览器中的顶层以覆盖底层div。这怎么可以用jQuery/CSS来完成？

www.sevenly.org

Answer 1

加{位置：固定}的 “层”（格）你不想滚动。确保它的z-index低于做滚动的div。

但要注意，这样做的移动兼容性也不是很大:)

Answer 2

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

Answer 3

这里有一个想法，你可以做到这一点。您可以根据自己的需要改进它。背景图层以及元素都是固定的。为使内容在背景和导航之间滚动，所有元素都有不同的值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; 
}