Konflikte in der Statusleiste mit dem Slide-Out-Menü behoben ⇐ HTML

[Anonymous]

Ich erstelle eine Website mit einer festen Statusleiste oben auf der Seite, ähnlich einer iOS-Statusleiste. Ich möchte, dass es oben befestigt wird, damit es immer da ist und der Inhalt darunter rollt. Ich habe auch ein ausziehbares Menü, das über eine Schaltfläche in der Statusleiste aufgerufen wird. Der gesamte Inhalt der Website ist in einem Div verpackt, das zur Seite verschoben wird, wenn das Menü herausgeschoben wird.

Mein Problem tritt mit der Statusleiste auf, wenn das Menü herausgeschoben wird. Da es auf position: Fixed; eingestellt ist, mag es es nicht, verschoben zu werden. Dadurch wird die Statusleiste auf der Seite nach unten verschoben.

Mein CSS für die Statusleiste:

Code: Select all

.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;
}

Die JS Fiddle ist ein perfektes Beispiel für das Problem. Klicken Sie einfach auf die Schaltfläche „MENU“.

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