javascript - 位置为 : absolute I'm not able to scroll down my content

Question

我遇到了一个难题，我不知道该如何解决。 我正在使用 jQuery 开发左侧菜单，而且我已经可以正常工作了。

问题是，如果我的 div #content 只有 position:fixed，菜单工作正常，但是这个 position:fixed 我不能滚动我的其他内容，我的页面内容被阻止了。

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

如果我放置 position:fixed 和 position:absolute，我已经可以向下滚动我的内容，但是当我打开侧边菜单时，我也可以转到我的内容，这有点困惑，因为我可以访问菜单元素和内容。

所以我只希望在左侧菜单打开时阻止(固定)我的内容，否则我想向下滚动我的内容。

你知道我该怎么做吗？？

这是我的 fiddle : 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/)*/
}