title: Angular 6 - CSS - STICKY Header
body: <p>I have 3 elements : 1 toolbar, 1 map , an other toolbar. 
  the elements are one below the other</p>
  
  <p>I want that the second toolbar stay under the map element (at 400px of the top) but when i scroll down, my second toolbar will stop at 50px of the top and will fix under the first.</p>
  
  <p>Thanks for your help</p>
  
  <p>//Component.html</p>
  
  <pre><code>&lt;mat-toolbar color="primary" [ngStyle]="{'height':'50px'}"  class="fixed-header" &gt;
  &lt;/mat-toolbar&gt;
  
  &lt;div class="custom-popup" id="frugalmap" &gt;&lt;/div&gt;
  
  &lt;mat-toolbar color="warn" class="mat-elevation-z5"&gt;
  &lt;/mat-toolbar&gt;
  </code></pre>
  
  <p>//Component.css</p>
  
  <pre><code>.fixed-header {
  position: fixed;
  z-index:999;
  }
  
  #frugalmap {
  height: 300px;
  width: 100%;
  margin-top:50px;
  }
  
  .mat-elevation-z5 {
  position: relative;
  z-index: 2;
  }
  </code></pre>