Question

我在网上按照教程/说明通过使侧边栏位置“固定”来制作侧边栏固定位置并且工作正常。现在我意识到，由于我的页面具有最小宽度属性，当用户向侧面滚动时，不移动的内容会移动到侧边栏中。所以基本上，我正在寻找一种方法来在向下滚动时生成固定的侧边栏，但是当您向侧面移动时，内容不会跳到侧边栏中。我的代码有点像：

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/

注意：这不是我的实际代码，而是它的缩小版本，因为我的代码非常复杂。另外，我不能只使用流畅的布局。

Answer 1

看看这个小提琴：http://jsfiddle.net/NfKca/

修改后的css为：

#sidebar {
    position:fixed;
    height:500px;
    width: 100px;
    background-color: blue;                    
}
#content {
    box-sizing:border-box;
    background-color:purple;
    position:absolute;
    left:100px;           
}

Answer 2

正如其他人所说，只有css和html才有可能。但是，您可以使用javascript / jquery执行此操作。

只是想要使用jquery来做这件事，首先就像沃森所说的那样，改变边栏的索引（我不得不做出否定），只是把它包住它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

Answer 3

您可以在侧边栏上设置z-index: 1;。如果这没有帮助，那么如果你能用jsfiddle来说明你的意思，那将会很棒。

如何修复固定的侧边栏副作用？

3 个答案: