Ich habe eine Angular 2 Material-App, die das @ verwende<md-sidenav-layout> mit einem<md-toolbar> Innerhalb

<md-sidenav-layout>
  <md-sidenav #sidenav mode="side" class="app-sidenav" opened="true">
    sidenav content
  </md-sidenav>

  <md-toolbar color="primary" class="toolbar">
    toolbar content
  </md-toolbar>
</md-sidenav-layout>

Und es sieht so aus

Ich versuche, die Symbolleiste nach oben zu bewegen, damit sie sich nicht bewegt, wenn Sie nach unten scrollen. Dies dient dazu, die Übereinstimmung mit dem sidenav und seinem Titel herzustellen. Aber momentan funktioniert es nicht.

Ich obwohl das Hinzufügen vonposition: fixed; top: 0 würde den Trick machen, aber es tut nicht

/* Doesn't work */
.toolbar {
  position: fixed;
  top: 0;
}

Von was ich gelesen habeMDN: Position unddies SO post Überposition: fixed, es scheint, dass es nicht funktioniert, wenn der Elternteil ein @ verwendtransform. Und ich bin mir ziemlich sicher, dass das das ist, was dasmd-sidenav-layout wird für den Übergang verwendet, wenn das Sidenav umgeschaltet wird. Ich habe das @ getestposition: fixed; top: 0 auf einer einfachen statischen Seite, und es funktioniert gut.

Ich könnte versuchen, die Symbolleiste aus dem Kontext des @ zu entfernemd-sidenav-layout, aber es ist das, was die Animation und den Übergang behandelt, um die Symbolleiste und das Sidenav konsistent zu machen, wenn Sie das Sidenav umschalten.

Mein CSS-fu ist nicht stark. Vielleicht fehlt mir etwas. Hat jemand eine Idee, wie man das beheben kann? Abhilfemaßnahmen sind an dieser Stelle willkommen, solange ich den gewünschten Effekt erhalte.

Hier ist das Plunker.