Chr*_*sic 3 css jquery layout fixed
我的网站设置了这样的内容结构
<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中完全工作,只要它不会破坏我的页面并降低可接受性(就像它不会坐在页面的错误一侧)或者在我的标题或内容之上)
Chr*_*sic 11
最后我使用了一个javascript解决方案,在我开始之前,我来到这里发布的是
<script type="text/javascript">
$(window).scroll(function() {
$('#sidebarPage1').css('top', $(this).scrollTop() + "px");
});
</script>
哪个确实起作用并产生了我想要的结果,但它实现的效果非常缺乏,因为它看起来非常生涩和不愉快.
我今天做了一些谷歌搜索并遇到了这篇文章:使用jQuery的顶级浮动消息框.这引导我到这里来
<script type="text/javascript">
$(window).scroll(function() {
$('#sidebarPage1').animate({ top: $(window).scrollTop() + "px" },
{ queue: false, duration: 500, easing: 'easeInOutSine' });
});
</script>
这产生了我的侧边栏很好的干净滚动效果,在我看来缓和是真正帮助它感觉抛光.