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

Question

我正在制作一个在页面顶部带有固定状态栏的站点，例如 iOS 状态栏。我希望它固定在顶部，以便它始终存在并且内容在其下方滚动。我还有一个从状态栏上的按钮触发的滑出菜单。所有网站内容都包含在一个 div 中，当菜单滑出时，该 div 会被推到一边。

当菜单滑出时，我的问题出现在状态栏上。因为设置为position: fixed;，所以不喜欢被移动。它将状态栏推到页面下方。

状态栏的 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 是该问题的完美示例，只需单击 MENU 按钮即可。

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

Answer 1

根据评论编辑:

如果您在导航中添加一个 div，则可以在菜单打开时向该内部 div 添加一个 margin-left。这个 jsfiddle 现在在侧边菜单打开时菜单按钮仍然可见。

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

https://jsfiddle.net/Lz9fqvy8/

原始答案

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

如果您让内容隐藏在滑出菜单下方，工具栏将保留在原位。为此，我从 .site-wrap.has-push-left 中删除了 translateX。

https://jsfiddle.net/hg9038vd/

您也可以将 translateX 替换为 margin-left:300px 并且工具栏不会下推。

https://jsfiddle.net/m5xcq3zf/