title: Angular, material side nav and sticky toolbar
body: <p>I'm experimenting with material side nav and Angular 6/7. What I want to achieve is shown on the next two images.</p>
  
  <p>The app with collapsed side nav:</p>
  
  <p><a href="https://i.stack.imgur.com/BnqS5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BnqS5.png" alt="enter image description here"></a></p>
  
  <p>The app with expanded side nav:</p>
  
  <p><a href="https://i.stack.imgur.com/N9jaV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N9jaV.png" alt="enter image description here"></a></p>
  
  <p>In short:</p>
  
  <ul>
  <li>a side nav that can open and close with the button.</li>
  <li>a <strong>fixed</strong> toolbar above the content.</li>
  <li>scrollable content.</li>
  </ul>
  
  <p>The basic structure is the following, hinted <a href="https://material.angular.io/components/sidenav/overview" rel="nofollow noreferrer">here</a>.</p>
  
  <pre><code>&lt;mat-sidenav-container&gt;
    &lt;mat-sidenav mode="side" opened&gt;Sidenav content&lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content&gt;Main content, toolbar here&lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>A minimal working sample can be found <a href="https://stackblitz.com/edit/angular-qb5sty" rel="nofollow noreferrer">here</a>, at stackblitz.</p>
  
  <p><strong>My problem:</strong> the toolbar is not sticky and scrolls together with the content when I start scrolling.</p>
  
  <p><strong>My question:</strong> How can I make the toolbar stick on the top and do not scroll together with the content?</p>
  
  <p><strong>Note:</strong> The side nav itself is fixed because it has <code>fixedInViewport="true"</code>.</p>