如何僅滾動頂層以覆蓋瀏覽器底層？

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