CODEWITHSUNDEEP
javascriptjqueryhtmlcss
UserX
UserX

Reputation: 1327

With position: absolute I'm not able to scroll down my content

Im here with a difficult problem that Im not see how I can solve this. Im develloping a left side menu using jQuery, and I already have this working.

The problem is, If I have my div #content with only position:fixed, the menu is working fine, but with this position:fixed I can´t scroll my other content, I have the content of my page blocked.

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

If I put position:fixed and also position:absolute, I already can scroll down my content, but when I open my side menu I also can go to my content and its a bit confused, because I have acess to the menu items but also to the content.

So I want my content blocked (fixed) only when the side left menu is open, otherwise I waant to scroll down my content.

Do you know how I can do this??

this is my fiddle: http://jsfiddle.net/3Gezv/9/

My 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>

My 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;
}

Upvotes: 0

Views: 146

Answers (1)

Varinder
Varinder

Reputation: 2664

Try to avoind absolutely positioning main content of your page.

Heres one way to achieve what you're after

fiddle with commented css additions: http://jsfiddle.net/Varinder/9mw8r/1/

Relevant 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/)*/
}

Upvotes: 1

Related Questions