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

スクロールさせたくない「レイヤー」（div）に {position: fixed} を追加します。z-index がスクロールする div よりも低いことを確認してください。

ただし、これのモバイル互換性は優れていないことに注意してください:)

Answer 3

この効果は、body 要素にパディングを追加し (sevenly.org は 600px を使用します - ほぼ右)、要素を背景に完全に配置することによって実現されます。