角度，材质侧面导航和粘性工具栏 [英] Angular, material side nav and sticky toolbar

问题描述

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

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

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

简而言之:

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

基本结构如下，此处.

 < mat-sidenav-container>< mat-sidenav模式="side"已打开> Sidenav content</mat-sidenav>< mat-sidenav-content>主要内容，此处的工具栏</mat-sidenav-content></mat-sidenav-container> 

可以在Stackblitz的此处找到一个最小的工作样本.

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

我的问题:如何使工具栏停留在顶部并且不随内容一起滚动?

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

解决方案

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

编辑了 slackblitz

通过添加 position-fixed 类和 position:fixed

完成

I'm experimenting with material side nav and Angular 6/7. What I want to achieve is shown on the next two images.

The app with collapsed side nav:

The app with expanded side nav:

In short:

• a side nav that can open and close with the button.
• a fixed toolbar above the content.
• scrollable content.

The basic structure is the following, hinted 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>

A minimal working sample can be found here, at stackblitz.

My problem: the toolbar is not sticky and scrolls together with the content when I start scrolling.

My question: How can I make the toolbar stick on the top and do not scroll together with the content?

Note: The side nav itself is fixed because it has fixedInViewport="true".

解决方案

I edited your slackblitz sample as below.. and also moved the HELLO APPLICATION to right as you said in comment

edited slackblitz

done by adding position-fixed class with position: fixed

这篇关于角度，材质侧面导航和粘性工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！