网站布局中的 CSS 或 JQuery 固定侧边栏答案

【问题标题】：CSS or JQuery Fixed sidebar in website layout网站布局中的 CSS 或 JQuery 固定侧边栏
【发布时间】：2010-11-21 18:02:49
【问题描述】：

我的网站是这样设置的内容结构

<body>
    <div id="header></div>
    <div id="contentwrapper">
        <div id="content>
        ...
        </div>
        <div id="sidebar">
        ...
        </div>
    </div>
    <div id="footer"></div>
</body>

我试图让我的网站在侧边栏与静态布局中的位置完全相同的位置运行。它位于 Content 列的右侧，位于 header div 下方和 footer div 上方，并且如果它们水平缩小窗口，它不会移动到 content 列的顶部。

我尝试了谷歌通用 css 固定位置等，但找不到任何真正适合我的东西，所以我在这里问。我正在寻找如何使用 css 或 javascript 处理这个问题，如果它采用 javascript 路线，我最喜欢 JQuery 作为基础。

编辑我不需要支持老式浏览器，但是，我不在乎它是否可以在 ie6 中完全工作，只要它不会破坏我的页面并且可以接受地降级（就像它没有'不要坐在页面的错误一侧或我的标题或内容的顶部）

【问题讨论】：

标签： jquery css layout fixed

【解决方案1】：

最后，我使用了一个 javascript 解决方案，在我来之前我开始使用它并在这里发布是

<script type="text/javascript">
    $(window).scroll(function() {
        $('#sidebarPage1').css('top', $(this).scrollTop() + "px");
    });
</script>

这确实有效并产生了我想要的结果，但是它实现的效果非常缺乏，因为它非常生涩且令人不快。

我今天做了一些谷歌搜索，发现了这个帖子：Top Floating message box using jQuery。这导致我到这里

<script type="text/javascript">
    $(window).scroll(function() {
        $('#sidebarPage1').animate({ top: $(window).scrollTop() + "px" }, 
            { queue: false, duration: 500, easing: 'easeInOutSine' });
    });
</script>

它为我的侧边栏产生了一个很好的干净滚动效果，在我看来，缓动是真正有助于它感觉优美的原因。

【讨论】：

【解决方案2】：

尝试让您的内容 div 随内容一起滚动，而不是按高度扩展并导致整个页面出现滚动条。这样，无论内容有多大，您的布局都将保持不变，并且内容部分将获得滚动条

#content {
   overflow:auto;
}

这应该对你有用。

【讨论】：

这是一个我没有考虑过的选项，我希望滚动条像往常一样位于页面的边缘，但在最坏的情况下，这总是可能的回退
您可以随时在内容区域中玩转。在限制宽度的内容中有一个 div。然后让滚动内容 div 延伸到页面边缘，然后通过限制内容宽度将侧栏绝对定位在滚动框中保留的空白区域上。然后您的侧边栏可以出现在内容旁边，但在滚动条的正确一侧。
内容和我的网站都是使用蓝图的固定宽度布局，如果没有其他人提供更多内容，您的想法听起来非常可行
是的，它很丑……毫无疑问……但它的 css……通常是，哈哈