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是这个问题的完美示例，只需单击“菜单”按钮即可。

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

Answer 1

根据评论进行编辑：

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

我为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/

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

1 个答案: