固定状态栏与滑出菜单冲突

Question

我正在制作一个在页面顶部有固定状态栏的站点，就像一个iOS状态栏。我希望它是固定在顶部，所以它总是在那里，内容滚动在它下面。我还有一个从状态栏上的按钮触发的滑出菜单。所有站点内容都被包装在一个div中，当菜单滑出时，div会被推到一边。

当菜单滑出时，状态栏就会出现问题。因为它设置为position: fixed;，所以它不喜欢被移动。它将状态栏按下页面。

我的Statusbar CSS：

.toolbar {
color: purple;
position: fixed;
width: 100%;
height: 60px;
top: 0;
left: 0;
padding-top: 20px;
background: white;
border-bottom: 1px solid $white;
z-index: 99;
text-align: center;
}

JS Fiddle是这个问题的完美例子，只需单击菜单按钮即可。

JSFiddle：https://jsfiddle.net/mqrso95g/1/

Answer 1

基于评论的编辑：

如果在导航中添加一个div，则可以在菜单打开时向该内部div添加一个页边距。当侧菜单打开时，这个小提琴手的菜单按钮仍然可见。

我在Menu.prototype._init中为工具栏添加了一个变量，并使用.inner.is-active{ padding-left:300px; }在固定导航中填充内容。如果不将边距或填充扩展到页面的一侧，则不能向固定元素添加边距或填充。

https://jsfiddle.net/Lz9fqvy8/

原始答案

=====================================

如果您让内容隐藏在您的滑出菜单之下，工具栏将保持在原地。为了实现这一点，我从translateX中删除了.site-wrap.has-push-left。

https://jsfiddle.net/hg9038vd/

您还可以将translateX替换为margin-left:300px，工具栏不会向下推。

https://jsfiddle.net/m5xcq3zf/