Question

我在这里遇到一个难题，我不知道如何解决这个问题。我使用jQuery开发了一个左侧菜单，我已经有了这个工作。

问题是，如果我的div #content只有位置：固定，菜单工作正常，但是这个位置：修复我无法滚动其他内容，我的页面内容被阻止了。

#content {position:absolute; position:fixed;}

如果我把位置：固定而且位置：绝对，我已经可以向下滚动我的内容了，但是当我打开我的侧边菜单时我也可以转到我的内容并且有点困惑，因为我已经接通了菜单项目，但也包括内容。

所以我希望我的内容仅在左侧菜单打开时被阻止（修复），否则我想要向下滚动我的内容。

你知道我怎么做吗？

这是我的小提琴： http://jsfiddle.net/3Gezv/9/

我的HTML：

<div id="menu">
        <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
        </ul> 
</div>
<div id="content">
    <div id="menubar">
        <div id="open_menu">Menu</div>
    </div>
</div>

我的css：

* {
    padding: 0px;
    margin: 0px;
}

#menubar {
    width:100%;
    background-color:gray;
    color: #fff;
    padding: 10px;
}

#open_menu {
    cursor:pointer;
}

#menu, #content {
    display:inline;
}

#menu li a {
    padding: 10px;
    display: block;
}

#content {
    width:100%;
    background-color: #fff;
    z-index: 5;
    position: fixed;
    left: 0px;
    height: 100%;
    -webkit-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
    moz-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
    o-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
    box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}

#menu {
    float:left;
    width: 350px;
    height: 100%;
}

#menu li {
    background-color:gray;
    border-bottom: 1px solid #888;
}

Answer 1

尽量避免绝对定位网页的主要内容。

这是实现你所追求的目标的一种方式

添加了评论的css补充：http://jsfiddle.net/Varinder/9mw8r/1/

相关CSS：

#menubar {
    /*width:100%;*/
    ... some styles ...
    position:fixed;
}


/*
#menu, #content {
    display:inline;
}
*/


#content {
    /*width:100%; block elements will be full width by default*/
    z-index: 5;
    /*position: fixed;*/
    position:relative; /*so content will go above menu*/
    ...
}

#menu {
    /*float:left;*/
    width: 350px;
    height: 100%;
    position:fixed; /* menu will stick to sidebar regardless of scroll */
    top:30px; /*so content will not go behing menubar*/
}


.news {
    padding-top:50px; /*so content will not go behing menubar*/
    min-height:900px; /*to create a fake long ass page*/
}

body {
    overflow-x:hidden; /*will avoind horizontal scrollbar when menu is opened, this is a bit critical. Will be better not to use it as it may cause issues with webkit-overflow touch property (http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/)*/
}

位置：绝对我无法向下滚动我的内容

1 个答案: