Angular, material side nav and sticky toolbar
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
Lachezar Balev
Software developer since 2000. I also do that for fun and as a hobby. Keen motorbiker and plant grower when offline.
Updated on June 07, 2022Comments
-
Lachezar Balev almost 2 years
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"
.