My Sidemenu is high, Guys... :/

[Neonic1]

Ok so I’m using Ionic v1 for my current project and I designed myself a custom animated sidebar. It’s aligned perfect and everything. But, when I scroll down on my news feed/content the sidebar slides up with the window document upon scroll. Attached it 3 screenshots showing you exactly what I mean.

Please help me resolve this issue as, I wish to have THIS style and THIS layout as MY project.

Thanks in advance Ionic Family.

Here’s the CSS:

#sidemenu
{
    height:100vh;
    width:16%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    overflow-y: auto;
    display:none;

}
@media only screen and (min-width : 800px) {
    #sidemenu {
        /* styles here */
        /*width:20% !important;
        height:100% !important;
        overflow:hidden;*/
        width:16%;
    }
}
@media only screen and (max-width : 850px) {
    #sidemenu {
        /* styles here */
        /*width:100% !important;
        height:100%;
        position:relative;
        overflow:hidden;*/
        width:100%;
    }
    /*
      fiddle with this because the
      rotation portable menu is off
    */
    #sideitems{
      border:1px solid #FFF;
      width:40%;
      margin:auto;
      font-size: 15px;
    }
}

[rlouie]

position: absolute;

position: fixed

[Neonic1]

Doesn’t work in alignment with the content of my feed unless it’s absolute.

[rlouie]

add margin/padding to your main content

[Neonic1]

It has both, but it won’t align correctly unless they’re in relation with one another. Cause CSS 101: Divs can not be in-lined by default

They stack on top each-other pushing one down so if the #sidemenu and #content aren’t in relation with one-another they won’t wrap right.

When I get back on my computer after Church I can provide more code snippets then to help assest this problem.

[rlouie]

This is absolutely not true and neither is your other comment.

CSS 101, both absolute and fixed remove the element from the normal document flow: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning

Therefore if your layout works in one it works in the other.

The only difference between them is that fixed is positioned relative to the screen’s viewport and doesn’t move when scrolled. Which is exactly what you asked for.

[Neonic1]

I guess you haven’t done enough tinkering.

Anyways I see your fiddle. But that doesn’t work. I’ve onviously tried that. It’ll do it, but when the document is scrolled the height of menu contents move up along the document.

[Neonic1]

Sorry, I get annoyed when it seems like people are being rude…

However, the problem was I used some stupid online idea of always having the max height as 100vh but that was the issue because I changed it back to 100% and that seems to be working.

But, there’s one more thing I’m trying to accomplish. The #sidemenu's #sideitems still are scrolling with the height of the document. I’m going to try generating the same concept behind the #sidemenu to see if that’ll help keep the #sideitems operating in the same manner as the #sidemenu that way they don’t scroll with the document height either.

Suggestions?
Also, thanks @rlouie!

[Neonic1]

This is what’s going on so far…

This is what it looks like when I scroll:

This is what I want no matter how much I scroll: