一个时髦的滚动布局

Question

我正在努力调整http://www.webeffectual.com/中展示的布局以满足我的需求。我想要这些功能：

1. #toolbar div固定在浏览器窗口的顶部，与任何滚动无关。
2. #resultsLayer在滚动<{li>时滑过#introLayer
3. #searchBar在#searchbar点击#toolbar时滚动到顶部但在#toolbar下方（就像包含5个圆形彩色按钮的div一样贴在窗口顶部）在http://www.webeffectual.com/中，但在我的情况下，它应该在#toolbar下面
4. #resultsContainer及其所有子项应在#searchBar下方进一步滚动（就像导航部分下http://www.webeffectual.com幻灯片粉红色图层中的文字一样）

到目前为止，我已经实现了这一目标：fiddle并且它似乎是一条陡峭的道路：

1. 让它工作到@HC _
2. 达成:)）
3. 让它正常工作:) 但是#searchBar和#results之间存在一个差距，它在滚动时被填充：（
4. 通过在#searchBar 上设置宽度来实现这一点，除了那个差距

ul标签的边距设置为16px，设置为0px n，摆脱了差距 一切正常:)新年快乐！ esp @HC_，重创新的一年！

Answer 1

1a）您的工具栏需要设置宽度。添加width:100px;以使其正常工作

1b）请注意，z-index不会以您最有可能的方式运作，了解更多here

3）可能只是position:fixed;和top:50px;

的位置

总的来说，只是花更多的时间锤击！