我的网站设置了这样的内容结构
<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>
这在我的侧边栏上产生了很好的干净滚动效果,在我看来,缓和是真正帮助它变得光滑的东西。