【发布时间】：2018-12-27 14:39:41
【问题描述】：
我正在试验材料侧导航和 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>
可以在 stackblitz 上找到here 的最小工作示例。
我的问题：当我开始滚动时，工具栏没有粘性并且与内容一起滚动。
我的问题：如何让工具栏贴在顶部而不随内容一起滚动？
注意：侧导航本身是固定的，因为它有fixedInViewport="true"。
【问题讨论】：
-
我会在
mat-toolbar元素上添加一个 css 类。然后添加一个固定在css类上的位置，如position: fixed。执行此操作后，您会注意到您的内容在工具栏下滑动。您可以通过使用另一个 div 包装您的内容并为该 div 提供一个具有工具栏高度的margin-top来防止这种情况发生。 -
我做了类似的事情，只是添加了一个带有
mat-toolbar-single-row类的div，这是工具栏的实际高度...... Boh......现在我注意到如果我将我的HELLO APPLICATION移动到最右边工具栏的一部分（通过添加带有flex: 1 1 auto的跨度）它会在抽屉打开时滑出窗口:( 我只是可以相信没有一种微不足道且受支持的方法来做这个非常简单的事情......
标签： angular angular-material material-design