我按照在线教程/说明通过使侧边栏位置“固定”来使侧边栏固定位置,并且效果很好。现在我意识到,因为我的页面有一个 min-width 属性,当用户横向滚动时,没有移动的内容会移动到侧边栏中。所以基本上,我正在寻找一种方法来在您向下滚动时生成固定的侧边栏,但是当您向侧面移动时,内容不会跳入侧边栏。我的代码类似于以下内容:
CSS
#sidebar {
position:fixed;
height:500px;
width: 100px;
background-color: blue;
}
#content {
width:100%;
box-sizing:border-box;
margin-left:100px;
background-color:purple;
}
HTML
<div id="sidebar">
</div>
<div id="content">
</div>
JSFiddle:http://jsfiddle.net/znCF3/1/
注意:这不是我的实际代码,而是它的缩小版本,因为我的代码非常复杂。另外,我不能只使用流畅的布局。
最佳答案
正如其他人所说,仅使用 css 和 html 是不可能的。但是,您可以使用 javascript/jquery 执行此操作。
只是封装你想使用 jquery 来做这件事,首先就像 watson 说的,改变侧边栏的索引(我不得不做出否定),只是封装它 jquery 不管出于什么原因对某人不起作用。
然后添加到你的<head>
:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
<!--
$(document).ready(function() {
$(window).scroll(function(){
var offSet = - ($(this).scrollLeft());
$('#sidebar').css('left', offSet);
});
});
//-->
</script>
关于css - 如何修复固定侧边栏的副作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11368204/