Opening up my side drawer causes a header with fixed position to move when the page is scrolled

Question

Here's my fiddle

I have two div elements in the body , #drawer and #content . Inside the div #content is a header which is position: fixed .

When the top left menu button in the header is clicked, the main #content div is translated using css3 transforms and a transition to simulate an "opened" state for the drawer. It's when I do this that the problem occurs.

Scrolling the #content div while the #drawer is open, or scrolling this div a little and then opening the #drawer causes the header to move up to the top of the page, even though it's fixed.

Not precisely sure what the problem is after a little while staring at it, would love a few more experienced eyes on it as I'm trying to get it done as quickly as possible.

Would really appreciate any help you guys can offer me. Thanks in advance :)

Answer 1

I've had problems when using transform and position:fixed together. In my fiddle I used transition instead of transform . I also modified your jQuery just a touch, but I think you'll get the idea.

The key is this:

#content.open,
#content.open header{
    left: 70%;
}
#content, header {
    transition: 300ms left;
    -webkit-transition: 300ms left;
    -moz-transition: 300ms left;
    -o-transition: 300ms left;
    left: 0;
}