0

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

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

4

3 回答 3

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;           
}
于 2012-07-06T19:15:00.860 回答
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>

例子

于 2012-07-06T19:29:11.497 回答
0

您可以z-index: 1;在侧边栏上设置 。如果这没有帮助，如果您可以制作一个 jsfiddle 来说明您的意思，那就太好了。

于 2012-07-06T19:07:42.090 回答