title: Fixed header using angular material and flex layout
body: <p>I am working with Angular 2 app using angular material and angular flex layout.I have created in my application a <strong>login form</strong> and <strong>a header</strong> which is only visible after login in my home page.</p>
  
  <p>In my app.component.html I have added my header and applied the below style to get it fixed while scrolling. </p>
  
  <pre><code>&lt;div style="margin-bottom:5px;
     top: 0;
      position: sticky;
      z-index: 1;
      background-color: inherit;"&gt;
  </code></pre>
  
  <p>In my home page I have added a <strong>mat-toolbar</strong> component,<strong>mat-card</strong> component and <strong>mat-sidenav</strong> component.</p>
  
  <p>After logging in the app, when I scroll the homepage content is overlapping my fixed header and my header is getting covered with the home page content.</p>
  
  <h2>Below shown is my app.component.html</h2>
  
  <pre><code>&lt;div style="margin-bottom:5px;
     top: 0;
      position: sticky;
      z-index: 1;
      background-color: inherit;"&gt;
  &lt;mat-toolbar color="primary" *ngIf="showmenu.visible1" fxLayoutAlign="center center"&gt;
    &lt;h2  *ngIf="showmenu.visible1"&gt;&lt;span class="span"&gt;Rockefeller FY 2009&lt;/span&gt;&lt;/h2&gt;
  &lt;/mat-toolbar&gt;
  
  
  &lt;mat-toolbar color="primary" *ngIf="showmenu.visible1" fxLayoutAlign="center center"&gt;
    &lt;h2  *ngIf="showmenu.visible1"&gt; &lt;span class="span"&gt;AUG-SEP&lt;/span&gt;&lt;/h2&gt;
  &lt;/mat-toolbar&gt;
  
  
  &lt;mat-toolbar *ngIf="showmenu.visible1"  fxLayout="column" fxLayoutAlign="space-around start" 
                style="background: darkblue;height: 3vh;"&gt;
      &lt;h6&gt;Web-Based Space Survey Application &lt;/h6&gt;
  &lt;/mat-toolbar&gt;
  
  
  &lt;mat-divider&gt;&lt;/mat-divider&gt; 
  
      &lt;div fxShow="true" fxHide.lt-md="true"&gt;
      &lt;mat-toolbar class="basic" color="basic" *ngIf="showmenu.visible1" fxLayout="row" fxLayoutAlign="space-evenly start" &gt;        &lt;!-- The following menu items will be hidden on both SM and XS screen sizes --&gt;
      &lt;mat-nav-list &gt;
          &lt;button mat-raised-button  routerLink='Espace/home' routerLinkActive="active" &gt;
      &lt;mat-icon&gt;home&lt;/mat-icon&gt;&lt;br/&gt;HOME&lt;/button&gt;
  
      &lt;button mat-raised-button routerLink='Espace/SpaceSurvey' routerLinkActive='active'&gt;
      &lt;mat-icon&gt;explore&lt;/mat-icon&gt;&lt;br/&gt;SPACE SURVEY&lt;/button&gt;
  
          &lt;button mat-raised-button routerLink='Espace/spaceadmin' routerLinkActive='active'&gt;
      &lt;mat-icon&gt;account_box&lt;/mat-icon&gt;&lt;br/&gt;SPACE ADMIN&lt;/button&gt;
  
          &lt;button mat-raised-button  &gt;
      &lt;mat-icon&gt;assignment&lt;/mat-icon&gt;&lt;br/&gt;REPORTS&lt;/button&gt;
  
          &lt;button mat-raised-button  &gt;
      &lt;mat-icon&gt;supervisor_account&lt;/mat-icon&gt;&lt;br/&gt;JOINT USE&lt;/button&gt;
  
      &lt;button mat-raised-button &gt;
      &lt;mat-icon&gt;help_outline&lt;/mat-icon&gt;&lt;br/&gt;HELP&lt;/button&gt;
  
          &lt;/mat-nav-list&gt;
      &lt;/mat-toolbar&gt;
      &lt;/div&gt; 
      &lt;/div&gt;
      &lt;div *ngIf="showmenu.visible1" fxShow="true" fxHide.gt-sm="true" fxLayout="row" fxLayoutAlign="start none" 
        style="font-weight: bold;font-size: 18px;color: darkblue;padding: 15px 0 0 5px; "&gt;MENU
  
        &lt;a  (click)="sidenav.toggle()"&gt;&lt;mat-icon  style="-webkit-text-fill-color:darkblue;padding: 0 0 0 1px; "&gt;keyboard_arrow_right&lt;/mat-icon&gt; &lt;/a&gt;
  
      &lt;/div&gt;
  
    &lt;mat-sidenav-container fxFlexFill class="example-container" &gt;
      &lt;mat-sidenav #sidenav fxLayout="column"&gt;
      &lt;div fxLayout="column" fxLayoutAlign="center start"&gt;
      &lt;mat-nav-list &gt;
  
      &lt;a mat-list-item routerLink='Espace/home' routerLinkActive="active"&gt; 
      &lt;mat-icon  style="-webkit-text-fill-color:deeppink;"&gt;home&lt;/mat-icon&gt;&lt;p class="tabs"&gt;HOME&lt;p&gt;&lt;/a&gt;
  
      &lt;a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'&gt;
      &lt;mat-icon  style="-webkit-text-fill-color:deeppink; "&gt;explore&lt;/mat-icon&gt;&lt;p class="tabs"&gt;SPACE SURVEY&lt;/p&gt;&lt;/a&gt;
  
      &lt;a mat-list-item routerLink='Espace/home' routerLinkActive="active"&gt; 
      &lt;mat-icon  style="-webkit-text-fill-color:deeppink;"&gt;account_box&lt;/mat-icon&gt;&lt;p class="tabs"&gt;SPACE ADMIN&lt;/p&gt;&lt;/a&gt;
  
      &lt;a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'&gt;
      &lt;mat-icon  style="-webkit-text-fill-color:deeppink; "&gt;assignment&lt;/mat-icon&gt;&lt;p class="tabs"&gt;REPORTS&lt;/p&gt;&lt;/a&gt;
  
      &lt;a mat-list-item routerLink='Espace/home' routerLinkActive="active"&gt; 
      &lt;mat-icon  style="-webkit-text-fill-color:deeppink;"&gt;supervisor_account&lt;/mat-icon&gt;&lt;p class="tabs"&gt;JOINT USE&lt;/p&gt;&lt;/a&gt;
  
      &lt;a mat-list-item routerLink='Espace/SpaceSurvey' routerLinkActive='active'&gt;
      &lt;mat-icon  style="-webkit-text-fill-color:deeppink; "&gt;help_outline&lt;/mat-icon&gt;&lt;p class="tabs"&gt;HELP&lt;/p&gt;&lt;/a&gt;
  
      &lt;a mat-list-item  (click)="sidenav.toggle()" &gt;
      &lt;mat-icon  style="-webkit-text-fill-color:red;font-size: 18px;font-weight: bold; padding-left: 3px;"&gt;keyboard_arrow_left&lt;/mat-icon&gt;&lt;/a&gt;
  
      &lt;/mat-nav-list&gt;
        &lt;/div&gt;
      &lt;/mat-sidenav&gt;
  
  
    &lt;mat-toolbar *ngIf="showmenu.visible1" style="height:1vh;background: darkblue;"&gt;&lt;/mat-toolbar&gt;
  
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  
    &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <h2>app.component.css</h2>
  
  <pre><code>.mat-toolbar{
    height: 5vh;
  }
  
  .basic{
      height: 12vh;
  }
  
  .span{
     font-family:Georgia, serif;
       font-style:Italic;
       font-size:20px;
  }
  
  h6{
      color:white;
      font-size:12px;
      font-weight:bold;
      font-family: Verdana, sans-serif;
  }
  
  .mat-raised-button{
      border-radius:20px;
      max-height:10vh;
      font-size: 12px;
      font-weight: bold;
      color: white;
      background: #6A5ACD;
  }
  
  .mat-icon {
      transform: scale(1.5);
  }
  
  .mat-sidenav{
      background: darkblue;
  }
  
  .tabs{
      padding-left: 5px;
      color: white;
      font-size: 12px;
      font-family:  Verdana, sans-serif;
  }
  </code></pre>
  
  <h2>app.component.ts</h2>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router} from '@angular/router';
  import {ShowmenuService} from './showmenu.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
  
  })
  export class AppComponent implements OnInit {
    title = 'app';
    isprofile=false;
    constructor(private _router:Router, public showmenu: ShowmenuService){}
  
    ngOnInit(){
  
      this._router.navigate(['login']);
  
    }
  
  
  }
  </code></pre>
  
  <p>Can anybody please help me in proper implementation of my fixed header?</p>