3

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

<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 作为基础。

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

4

2 回答 2

11

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

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

于 2009-08-24T13:04:55.067 回答
2

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

#content {
   overflow:auto;
}

那应该对你有用。

于 2009-08-21T18:05:12.153 回答