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

here's fiddle

i have 2 div elements in body, #drawer , #content. inside div #content header position: fixed.

when top left menu button in header clicked, main #content div translated using css3 transforms , transition simulate "opened" state drawer. it's when problem occurs.

scrolling #content div while #drawer open, or scrolling div little , opening #drawer causes header move top of page, though it's fixed.

not precisely sure problem after little while staring @ it, love few more experienced eyes on i'm trying done possible.

would appreciate guys can offer me. in advance :)

i've had problems when using transform , position:fixed together. in fiddle used transition instead of transform. modified jquery touch, think you'll idea.

the key 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; }