CSS Transform over layer that already has tansform - css

Question

I have left and right sliding panels that are animated with TranslateX.
I am also using the headroom jQuery plugin which drops down a top nav when the user scrolls up using Translate Y.
The issue is the header is not visible when the page scrolls up if the transform is declared on the wrapper div.
If transform: translateX(0px); is removed from wrapper in firebug, the header is fixed when the page scrolls up. If it is present, the header seems to be static at the top of the page despite having a position: fixed attribute.
BASIC HTML:
<div id="wrapper">
<header>
</header>
</div>
CSS FOR SIDEBARS AND WRAPPER:
#left-sidebar{
background-color:#8BA6BC;
position:fixed;
top:0;left:0;
width:80%;
height:100%;
z-index:20;
overflow:auto;
transform:translateX(-100%);
-moz-transform:translateX(-100%);
-webkit-transform:translateX(-100%);
transition:-moz-transform .25s ease-in-out;
-moz-transition:-moz-transform .25s ease-in-out;
-webkit-transition:-webkit-transform .25s ease-in-out;
}
#left-sidebar-handler.open ~ #left-sidebar{
transform:translateX(0);
-moz-transform:translateX(0);
-webkit-transform:translateX(0);
}
#right-sidebar{
background-color:#8BA6BC;
position:fixed;
top:0;
right:0;
width:80%;
height:100%;
z-index:20;
overflow:auto;
transform:translateX(100%);
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transition:-moz-transform .25s ease-in-out;
-moz-transition:-moz-transform .25s ease-in-out;
-webkit-transition:-webkit-transform .25s ease-in-out;
}
#right-sidebar-handler.open ~ #right-sidebar{
transform:translateX(0);
-moz-transform:translateX(0);
-webkit-transform:translateX(0);
}
#wrapper{
display:block;
position:relative;
min-height:100%;
height:auto !important;
height:100%;
margin-bottom:-45px;
z-index:5;
transform:translateX(0);
-moz-transform:translateX(0);
-webkit-transform:translateX(0);
transition:-moz-transform .25s ease-in-out;
-moz-transition:-moz-transform .25s ease-in-out;
-webkit-transition:-webkit-transform .25s ease-in-out;
}
#left-sidebar-handler.open ~ #wrapper{
transform:translateX(80%);
-moz-transform:translateX(80%);
-webkit-transform:translateX(80%);
}
#right-sidebar-handler.open ~ #wrapper{
transform:translateX(-80%);
-moz-transform:translateX(-80%);
-webkit-transform:translateX(-80%);
}
CSS FOR HEADER:
html.signed-in header{
position:fixed;
z-index:999;
top:0;
left:0;
width:100%;
min-height:46px;
line-height:46px;
background-color:#8BA6BC;
color:#fff;
}
html.signed-in header.headroom{
-webkit-transition:-webkit-transform 200ms linear;
-moz-transform 200ms linear;
transition:transform 200ms linear;
}
html.signed-in header.headroom--pinned{
-webkit-transform:translateY(0%);
-ms-transform:translateY(0%);
-moz-transform:translateY(0%);
transform:translateY(0%);
}
html.signed-in header.headroom--unpinned{
-webkit-transform:translateY(-100%);
-ms-transform:translateY(-100%);
-moz-transform:translateY(-100%);
transform:translateY(-100%);
}