角度，材质侧面导航和粘性工具栏

Question

我正在尝试侧面导航和Angular 6/7。接下来的两张图片显示了我想要实现的目标。

侧面导航已折叠的应用程序：

侧面导航扩展的应用程序：

简而言之：

• 可以通过按钮打开和关闭的侧面导航。
• 一个固定的工具栏的内容的上方。
• 可滚动的内容。

其基本结构如下，暗示这里。

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
  <mat-sidenav-content>Main content, toolbar here</mat-sidenav-content>
</mat-sidenav-container>

一个最小的工作样本，可以发现在这里，在stackblitz。

我的问题：工具栏不粘滞，在我开始滚动时会与内容一起滚动。

我的问题：如何使工具栏停留在顶部而不与内容一起滚动？

注意：侧面导航本身是固定的，因为它具有fixedInViewport="true"。

Answer 1

我按如下所示编辑了您的slackblitz示例。并且如您在评论中所述，还向右移动了HELLO APPLICATION

编辑的slackblitz

通过添加position-fixed类来完成position: fixed