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

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


我试图使我的网站表现出相对于静态布局而言,侧边栏位于完全相同的位置。它位于“内容”列的右侧,位于页眉div的下方和页脚div的上方,并且如果它们水平缩小窗口,则该窗口不会在“内容”列的顶部移动。

我已经尝试过Google通用CSS固定位置等功能,却找不到任何真正与我合作的东西,这使我在这里提出了疑问。我正在寻找如何使用css或javascript处理此问题,如果它遵循我最希望以JQuery为基础的javascript路由。

编辑我不需要支持古旧的浏览器,但是,我不关心它是否可以在ie6中完全正常工作,只要它不会破坏我的页面并且可以将其降级(例如,它不会位于页面的错误一侧)或在我的标题或内容之上)

最佳答案

最后,我使用了一个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>


这在我的侧边栏上产生了很好的干净滚动效果,在我看来,缓和是真正帮助它变得光滑的东西。

10-05 20:44
查看更多