Question

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

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

我正在尝试让我的网站表现为侧栏停留在相对于静态布局中相同位置的位置。它位于内容列的右侧，它位于标题div下方和页脚div上方，如果它们水平缩小窗口，则它不会移动到内容列的顶部。

我已经尝试了谷歌通用css固定位置等，并且无法找到任何真正与我合作的东西，所以这引导我在这里问。我正在寻找如何用css或javascript来处理这个问题，如果它是javascript路由我最喜欢JQuery作为基础。

编辑我不需要支持archiac浏览器，但我不在乎它是否在ie6中完全正常工作，只要它不会破坏我的页面并降低可接受性（就像它没有不要坐在页面的错误一侧或我的标题或内容的顶部。

Answer 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>

这会产生我的侧边栏干净利落的滚动效果，在我看来，宽松是真正帮助它感觉完美的。

Answer 2

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

#content {
   overflow:auto;
}

这应该适用于你。

CSS或JQuery修复了网站布局中的侧边栏

2 个答案: