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

Question

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

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

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

简而言之：

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

基本结构如下，提示为here。

<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>

在栈闪电战中可以找到here的最小工作样本。

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

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

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

Answer 1

我按如下所示编辑了您的slackblitz示例。并且还按照您在评论中所说的那样，将HELLO APPLICATION移到了右边

编辑的slackblitz

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