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

我正在制作一个页面顶部有固定状态栏的网站，例如iOS状态栏。我希望它被固定在顶部，所以它总是在那里，并且内容在它下面滚动。我还有一个由状态栏上的按钮触发的滑出式菜单。所有的网站内容都被封装在一个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小提琴是问题的一个很好的例子，只要按一下MENU键。

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

来源

2016-08-05 gkrizek

编辑基于评论：

如果你把你的资产净值的内一个div，你可以添加一个利润率左到内div时菜单打开。当侧面菜单打开时，此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/

来源

2016-08-05 13:35:02

感谢您的帮助！我知道滑动内容是一种选择，但我真的想推动内容。尽管第二种解决方案确实保留了状态栏，但它似乎并未将其移至其他位置，或至少移动按钮。看到这个更新：https://jsfiddle.net/m5xcq3zf/1/我想菜单按钮滑过，当菜单弹出时仍然可见（并且应用文本从页面滑出，就好像它正在将整个状态栏移出视图）。有没有办法做到这一点？ – gkrizek

想出了最后一部分。我只需要将left：0;'改为'margin：0;'现在一切都很流畅，看起来很棒！我仍然将你的答案标记为正确，我只需要做一点小改动就可以得到我想要的确切结果。最后的小提琴：https://jsfiddle.net/m5xcq3zf/2/ – gkrizek

最后一个音符。如果您希望所有内容保持完全相同，并且没有通过'margin-left：300;'更改重新格式化，则必须添加'＃site-wrap {width：100％; }'早些时候在CSS中，所以它不会被调整大小。 – gkrizek

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

回答

相关问题