Angular 、 Material 侧导航和粘性工具栏

Question

我正在试验 Material 侧导航和 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 ，在堆栈 Blitz 。

我的问题:当我开始滚动时，工具栏没有粘性并且与内容一起滚动。

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

注:侧面导航本身是固定的，因为它有 fixedInViewport="true" .

Answer 1

我编辑了您的 slackblitz 示例，如下所示.. 并将 HELLO APPLICATION 移至右侧，正如您在评论中所说

已编辑 slackblitz

通过添加 position-fixed 完成与 position: fixed 一起上课