并排固定的div - 一个覆盖另一个

Question

http://codepen.io/justinturner/pen/VjyWJE

链接的codepen有一个固定的标题div。

我点击汉堡图标时使用javascript在左侧添加菜单div。这也是一个固定的div。

当添加菜单div时，标题div似乎恢复为相对定位，并跳转到主内容div的顶部。向下滚动一根头发，然后点击汉堡包，你就会明白我的意思。

我遇到什么问题？当用户点击汉堡包时，我希望标题保持固定，并像其他内容一样直接翻译到右边。

<em>too much code to paste</em>

Answer 1

根据这里的 spec 和其他 similar questions ，固定元素和翻译不会“播放”< / em>很好。

  

作为一种解决方法，您可以：

     

1）使用转换（例如，在左侧属性上）而不是转换（translateX）

     

2）从容器中移除位置：固定按钮，使用转换

按照上面的第一个建议（使用left代替translateX），将代码编辑为以下内容，问题不再存在。

.o-wrapper.has-push-left {
    left: 300px;
}
.o-wrapper {
  position: relative;
  transition: left 0.3s;
}

#header-wrapper {
  transition: left 0.3s;
}

.has-push-left #header-wrapper {
  left: 300px;
}

<强> DEMO