Angular, material side nav and sticky toolbar

user_520359 0
Viewed 19394

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:

enter image description here

The app with expanded side nav:

enter image description here

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

material-design angular-material angular
1 Answers

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

user_104724600
Related