已具有tansform的层上的CSS转换

我有左滑动面板和右滑动面板，它们用TranslateX设置动画

我还使用了Headloom jQuery插件，当用户使用Translate Y向上滚动时，它会下拉一个顶部导航

问题是，如果在包装器div上声明了转换，则当页面向上滚动时，标题不可见

如果

transform:translateX（0px）在firebug中从包装器中删除，当页面向上滚动时，标题是固定的。如果它存在，尽管有position:fixed属性，但页眉在页面顶部似乎是静态的

基本HTML：

<div id="wrapper">
  <header>
  </header>
</div>

标题的CSS：

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%);
}

似乎将translate添加到包装器会使标题相对于包装器而不是视口窗口进行转换。但是，当边栏滑出时，标题也需要与包装一起滑出。我相信这也描述了问题：
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%);
}