角度、材质侧导航和粘性工具栏 [英] Angular, material side nav and sticky toolbar
问题描述
我正在试验材质侧导航和 Angular 6/7.我想要实现的目标显示在接下来的两张图片中.
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:
简而言之:
- 可以通过按钮打开和关闭的侧面导航.
- 内容上方的固定工具栏.
- 可滚动的内容.
基本结构如下,提示这里.
<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找到最小的工作示例.
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?
注意:侧边导航本身是固定的,因为它有fixedInViewport="true"
.
Note: The side nav itself is fixed because it has fixedInViewport="true"
.
推荐答案
我编辑了您的 slackblitz 示例,如下所示.. 并将 HELLO APPLICATION 移至右侧,如您在评论中所说
I edited your slackblitz sample as below.. and also moved the HELLO APPLICATION to right as you said in comment
编辑了slackblitz
通过添加 position-fixed
类和 position: fixed
这篇关于角度、材质侧导航和粘性工具栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!