Angular 角度、材质侧导航和粘滞工具栏

我正在试验材料侧导航和角度6/7。接下来的两张图片显示了我想要实现的目标

具有折叠侧导航的应用程序：

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

简言之：

• 可以用按钮打开和关闭的侧导航
• 固定了内容上方的工具栏
• 可滚动内容

基本结构如下所示

侧导航内容
主要内容，工具栏在这里

在stackblitz可以找到最小的工作样本

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

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

---

注意：侧导航本身是固定的，因为它有

fixedViewport=“true”

我编辑了slackblitz示例，如下所示。。并将HELLO应用程序移至右侧，如您在评论中所述

编辑

---

通过添加

positionfixed

类和

position:fixed

我将在

mat工具栏

元素上添加一个css类。然后在css类上添加一个固定的位置，如

position:fixed

。一旦你这样做了，你会注意到你的内容会滑到工具栏下面。你可以通过用另一个div包装你的内容，并给该div一个

页边空白顶部

和工具栏的高度来防止这种情况发生。我做了类似的事情，只是用class

mat toolbar single row添加了一个div

，这是工具栏的实际高度。。。啊。。。现在我注意到，如果我将HELLO应用程序移动到工具栏的最右边（通过使用

flex:1 auto

添加一个span），当抽屉打开时，它将滑出窗口：（我相信没有一种简单且受支持的方法来做这件非常简单的事情。。。

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