Search code examples
cssangularangular-materialsticky

Make mat-drawer left content sticky

I have a page with scroll that uses mat-drawer component

at the left I have a menu.

I would like that the menu content stay on screen when user scrolls the page

Here's the stackblitz example.

I have tried changing positions to sticky but not working

mat-drawer-example

Solution

  • You can just fix the sidebar to the left using position: fixed then let the content section scroll and leave the sidebar fixed!

    styles.scss

    html,
body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
}

html,
body {
  height: 100%;
}

    component.scss

    .example-container {
  border: 1px solid #555;
  display: block;
  height: 1000%;
  width: 100%;
}

:host {
  display: block;
  height: 100%;
  width: 100%;
}

.fixed-left {
  position: fixed;
  left: 0;
  top: 0;
  botttom: 0;
}

    html

    <mat-drawer-container class="example-container">
  <mat-drawer mode="side" opened class="fixed-left"
    >Make this sticky</mat-drawer
  >
  <mat-drawer-content><div>Main content</div></mat-drawer-content>
</mat-drawer-container>

    stackblitz