1
position:fixedコンテナをページの背景に置き、他のコンテンツをスクロールしながらバックグラウンド要素をクリックすることはできますか？非表示のコンテナの下にある固定コンテナ
効果は、フォアグラウンドのコンテンツが一定の背景をスクロールする視差スクロールの状況に似ていますが、画像だけでなくバックグラウンドにもHTMLを配置できるようにしたいのですが、そのHTMLで具体的に
、I set up a Fiddleユーザーがスクロールすることができ、私は最後のトップコンテナの後に「明らかに」されz-index:-1にposition:fixedギャラリーを持っているというのが私のページの上部の全幅divコンテナのシリーズ（以下コード）でスクロールします。ページをスクロールし続けると、固定ギャラリーを隠すコンテナの幅がさらに広がります（div）。
トップコンテナとボトムコンテナの間のこの「公開」スペースを達成するために私が見ることができるのは、真ん中の空のコンテナにピクセルの高さを追加することですが、下のギャラリーのもの。さらに、理想的には、固定高さのピクセル数ではなく、ビューポートの高さに基づいて高さを設定することをお勧めします。同じレイアウトを作成するより良い方法はありますか？またはこの設定の回避策ですか？
私はhttp://pro.boombotix.comで達成したいものの例を追跡することができました（特に「耐水性」の前のギャラリーのセクションを参照してください）。彼らはjavascriptでやっているようですが、大量のコードがあるので、並べ替えに問題があります。
ご協力いただきましてありがとうございます。
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.section {
width: 100%;
background-color: gray;
z-index: 0;
padding: 300px 0;
text-align: center;
}
.white { background-color: white; }
#gallery {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: linen;
}
#gallery a {
width: 20%;
padding: 75px 0;
display: inline-block;
text-align: center;
}
.pink { background-color: pink; }
.blue { background-color: cyan; }
#gallery-pusher {
height: 1000px;
}
</style>
</head>
<body>
<div class="section">
<h1>Top Section 1</h1>
</div>
<div class="section white">
<h1>Top Section 2</h1>
</div>
<div id="gallery">
<a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a>
</div>
<div id="gallery-pusher"></div>
<div class="section">
<h1>Bottom Section 1</h1>
</div>
<div class="section white">
<h1>Bottom Section 2</h1>
</div>
</body>
</html>
これは素晴らしいことです。私はマージンの使用を考えなかった。それは私に必要な行動を与えるように見えます。ありがとう！ – sapp5
元のコードの固定コンテナをz-index：1に変更し、スクロール可能なコンテナをposition：relative/z-index：2に変更すると、テストしたすべてのブラウザで問題が解決されました。しかし、あなたの例は、非セマンティックなdivに依存しないので、まだ優れています。 – sapp5