3

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

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“展开”。

我猜想做到这一点的一种方法是将页脚贴在屏幕底部的某个点上。有小费吗？

4

1 回答 1

1

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

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/

于 2013-08-12T04:42:22.243 回答