一个时髦的滚动布局[关闭]答案

【问题标题】：A funky scrolling layout [closed]一个时髦的滚动布局[关闭]
【发布时间】：2014-01-18 16:11:30
【问题描述】：

我正在尝试根据我的需要调整http://www.webeffectual.com/ 展示的布局。我想要这些功能：

#toolbar div 固定在浏览器窗口的顶部，与任何滚动无关。
#resultsLayer 在滚动时滑过 #introLayer
#searchBar 粘在顶部但低于#toolbar 一旦#searchbar 在滚动时点击#toolbar（就像包含5个圆形彩色按钮的div粘在窗口顶部，如http://www.webeffectual.com/所示，但在我的情况下它应该位于#toolbar 下方）
#resultsContainer 及其所有子项应在#searchBar 下方滑动并进一步滚动（就像http://www.webeffectual.com 粉色层中的文本在导航部分下方滑动一样）

到目前为止，我已经做到了这一点：fiddle，而且前面的路似乎很陡：

ul 标签的边距设置为 16px，设置为 0px n 以消除间隙一切正常:) 祝大家新年快乐！尤其是@HC_，迎接新的一年！

【问题讨论】：

我已经完成了这项工作，看看我的小提琴，但由于我的 css 定位有问题，我无法正确定位，所以这是个问题
这看起来真的是三到四个功能请求，而不是一个问题。我对您的建议是将您的问题分解为可以清楚地提出的单个问题并提供与它们相关的代码。不要只提供指向外部网站的链接，因为这些链接一旦发生变化，对未来的访问者将毫无用处。您可以在 SO 上发表多个帖子，因此请采取更细致的方法，我认为您会发现收到的答案会更有帮助。
这里的所有问题都交织在一起，并且与单个布局相关，因为一个 div 在另一个 div 下滑动，如果一个问题以某种方式得到解决，其他问题就会停止工作

【解决方案1】：

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

1b) 请注意，z-index 的工作方式可能并非您认为的那样，了解更多信息here

3) 可能只是用position:fixed; 和top:50px; 定位

不过，总的来说，还是多花点时间敲敲敲打吧！

【讨论】：