我的网站设置了这样的内容结构 body div id="header/div div id="contentwrapper" div id="content ... /div div id="sidebar" ... /div /div div id="footer"/div/body 我试图让我的网站表现为侧栏保持在相对于静态布局中
<body>
<div id="header></div>
<div id="contentwrapper">
<div id="content>
...
</div>
<div id="sidebar">
...
</div>
</div>
<div id="footer"></div>
</body>
我试图让我的网站表现为侧栏保持在相对于静态布局中的位置完全相同的位置.它位于Content列的右侧,它位于标题div下方和页脚div上方,如果它们水平缩小窗口,则它不会移动到内容列的顶部.
我已经尝试过谷歌通用css固定位置等,并且无法找到任何真正与我合作的东西,所以这引导我在这里问.我正在寻找如何用css或javascript处理这个问题,如果它是javascript路由我最喜欢JQuery作为基础.
编辑我不需要支持archiac浏览器但是,我不在乎它是否在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>
这产生了我的侧边栏很好的干净滚动效果,在我看来缓和是真正帮助它感觉抛光.