<分区>
我有这样的情况:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<style>
#wrapper { width: 1100px; margin: 0px auto; }
#wrapper #stream { width: 790px; float: left; border: 1px solid red; }
#wrapper aside { width: 270px; float: left; border: 1px solid red; }
</style>
<body>
<section id="wrapper">
<section id="stream">
some text...
</section>
<aside>
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</aside>
</section>
</body>
</html>
即使页面向下滚动，我也不希望侧边栏移动。
我尝试将 aside 的位置设置为 fixed 但无法正确设置与左侧的距离。
我找到了一个使用 jQuery 的解决方案:
$(document).ready(function () {
$(window).scroll(function () {
$("aside").css('top', $(window).scrollTop()+'px');
});
})
但是对于 Chrome 和 Safari，旁边的滚动条是分段的。
有什么帮助吗？
========================
解决方案:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<style>
#wrapper {
width: 1100px;
margin: 0px auto;
}
#stream {
width: 800px;
background: #ccc;
float: left;
}
#sidebar {
float: left;
border: 1px solid red;
width: 200px;
}
aside {
position: fixed;
top: 20px;
border: 1px solid red;
}
</style>
<body>
<section id="wrapper">
<section id="stream">
some text...
</section>
<section id="sidebar">
<aside>
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</aside>
</section>
</body>
</html>