简单的视差，CSS层，在滚动时显示最后一节

Question

我最近在网络世界看到了一个非常酷的效果。这就是"层次感"。用户将向下滚动页面，最后一个部分将出现在页面的前几个部分下面。有时它是用图像显示的，但我发现内容也可以这样显示。

现在，我非常熟悉z-index和CSS的定位。

然而，我似乎找不到合适的组合来让它以我想要的方式工作。

HTML:

<div id="main">Content content content content content content</div>
<div id="revealed-section"></div>

因此，#main看起来就像它在#revealed-section的顶部，一旦用户向下滚动到某个点，#reveal-section就会滑出。

我做了很多搜索，但我不知道这个技术的术语。

有什么想法吗？我更喜欢只使用CSS的解决方案。

---

在这里！：http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html我想要从幻灯片3过渡到幻灯片4，但它必须包含内容，而不仅仅是背景图像。

我发现我还想要一个页脚，看起来就像它最初附加到#main，但当用户进一步向下滚动时，#revealed-section会"展开"。

我猜，实现这一点的一种方法是将页脚粘贴在屏幕底部的某个点上。有什么建议吗？

Answer 1

显示的部分可以制作为position:fixed。占位符应该有一个设置的高度，只是为了扩展页面，这样用户就可以向下滚动并查看显示的固定分区。

HTML

<div id="main">Content content content content content content</div>
<div id="revealed-section-placeholder"></div>
<div id="revealed-section"> Content here </div>

CSS

#main {position:relative; z-index: 1;} 
#revealed-section {position:fixed; bottom: 0;} 

看看：http://jsfiddle.net/qYbs7/1/