在中心设计上滚动时固定面板

Question

好的，所以我想使用一个有三个div（布局为列）的布局。外部两个将与导航相关，因此我希望它们在用户滚动时保持原位。中间部分将容纳内容，因此需要与页面正常滚动。

我知道你通常使用position：fixed，但我希望整个设计都集中在页面上。使用固定定位不允许它像在中心设计中那样水平移动。有人知道如何达到所有这些标准吗？

我已经设置了一个jsfiddle来启动它：http://jsfiddle.net/8RqEt/

Answer 1

在外部元素上使用position:fixed; left: 50%; margin-left: ??px：

http://jsfiddle.net/M5X7q/

• left: 50%将每个元素的左边缘居中到页面：http://jsfiddle.net/M5X7q/1/
• 然后，正确数量的margin-left将每个元素放在需要的位置。

Answer 2

我知道你有自己的答案，但我希望能为其他任何想要解决类似问题的人改进我的答案。

怎么回事：

http://jsfiddle.net/M5X7q/6/

它滚动中间，修复蓝调，触发滚动条，加上它减少了我在你最后一个音符之前在小提琴中注意到的闪烁。

这使用了一个jquery插件解决方案（我刚刚纠正它来处理这种情况）。完成此任务不需要太多的js。

以下是用法：

$(document).ready(function() {
    $('.blue-1').scrollToFixed();
    $('.blue-2').scrollToFixed();
});

以下是插件及其来源的链接：

https://github.com/bigspotteddog/ScrollToFixed