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

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

我知道你通常会使用position:fixed，但我希望整个设计都集中在页面中央。使用固定定位将不允许它像居中设计一样水平移动。有人知道满足所有这些标准的方法吗

---

我已经设置了一个JSFIDLE来启动它：

使用

位置：fixed；左：50%；左边距：外部元件上的px

：

• left:50%

  将每个元素的左边缘居中于页面：
• 然后，正确的

  左边距

  将每个元素放置在需要的位置

---

我知道你有你的答案，但我想对我的答案稍加改进，以供其他希望解决类似问题的人参考

这个怎么样：

它滚动中间，修正蓝色，并触发滚动条，另外它还减少了我在小提琴上注意到的在你最后一个音符之前的闪烁

这使用了jquery插件解决方案（我刚刚更正了它来处理这个问题）。实现这一点不需要太多js

用法如下：

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

以下是该插件及其源代码的链接：

---

如果调整尺寸较小，是否有任何方法可以防止其变形？请尝试：-但请注意：根据页面上的其他内容，使用它可能会让人不舒服。例如，添加页脚将很困难。啊，它太接近了！如果蓝色框能够触发页面的水平滚动条而不是消失就好了。我基本上只是尝试适应较小的分辨率，所以也许我应该为它们提供一个替代样式表。ThanksI不知道如何用CSS解决这个问题。也许我只是忽略了一些显而易见的事情。。使用JavaScript控制

顶部

：Oops。必须点击“显示”按钮才能看到最后的评论。我不知道你们得到了。