css - 如何修复固定侧边栏的副作用?

标签 css html sidebar

我按照在线教程/说明通过使侧边栏位置“固定”来使侧边栏固定位置,并且效果很好。现在我意识到,因为我的页面有一个 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>

Example

关于css - 如何修复固定侧边栏的副作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11368204/

相关文章:

html - 侧边栏中带有图标的中心按钮

html - 是否可以使用剪辑隐藏 CSS 背景 Sprite 图像的特定区域?

javascript - 在呈现页面后附加 onmouseover?

html - 边框宽度 : inherit not working

jquery - body 选择器在 Firefox 上不起作用

css - 为什么隐藏侧边栏的元素?

css - 子菜单项显示在彼此之上

html - 对齐容器 div

html - 悬停时我想刷新我的页面

jinja2 - 模板化 Sphinx 的侧边栏目录树