我正在制作一个在页面顶部带有固定状态栏的站点，例如 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/
最佳答案
根据评论编辑:
如果您在导航中添加一个 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 并且工具栏不会下推。
关于javascript - 固定状态栏与滑出菜单冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38790448/