title: Hide toolbar component when it isn't on the top of the page
body: <p>I have a toolbar like this<a href="https://i.stack.imgur.com/fzYYB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fzYYB.png" alt="enter image description here"></a> <br>Its background is transparent. But when i scroll down, this look like <a href="https://i.stack.imgur.com/YxZQe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YxZQe.png" alt="enter image description here"></a> <br>
  How can i hide this component when the page scroll down and show it when scroll up to the top of the page?
  My English is not good. Sorry about this.</p>
  
  <p>EDIT : 
  I use mat-toolbar</p>
  
  <pre><code>&lt;mat-toolbar color="primary"&gt;
  
  &lt;button mat-button routerLink="/" [ngStyle]="{'color': colorStyle === 'WHITE' ? 'white' : 'black'}"&gt;
  &lt;mat-icon&gt;home&lt;/mat-icon&gt; 
  {{ 'PAGE.HOME' | translate}}&lt;/button&gt;
  
  &lt;!-- This fills the remaining space of the current row --&gt;
  &lt;span class="fill-remaining-space"&gt;&lt;/span&gt;
  &lt;div fxLayout="row" fxShow="false" fxShow.gt-sm [ngStyle]="{'color': colorStyle === 'WHITE' ? 'white' : 'black'}"&gt;
      &lt;button mat-button routerLink="['/home']"&gt;{{ 'PAGE.HOME' | translate}}&lt;/button&gt;
      &lt;button mat-button routerLink="['/home']"&gt;{{ 'PAGE.D9' | translate}}&lt;/button&gt;
      &lt;button mat-button routerLink="['/home']"&gt;{{ 'PAGE.DThuDuc' | translate}}&lt;/button&gt;
      &lt;button mat-button routerLink="['/home']"&gt;{{ 'PAGE.MORE' | translate}}&lt;/button&gt;
      &lt;button mat-button [routerLink]="['/add']"&gt;{{ 'PAGE.ADD' | translate}}&lt;/button&gt;
      &lt;button mat-button [routerLink]="['/login']" *ngIf="!loginStatus"&gt;{{ 'PAGE.LOGIN' | translate}}&lt;/button&gt;
      &lt;button mat-button [routerLink]="['/login']" *ngIf="loginStatus"&gt;{{ 'PAGE.LOGOUT' | translate}}&lt;/button&gt;
      &lt;button mat-button [routerLink]="['/show-map']" [queryParams]="{ lat: data.lat, lng: data.lng}"&gt;{{ 'PAGE.OVERVIEW' | translate}}&lt;/button&gt;
  
  
  
  &lt;/div&gt;
  &lt;button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm&gt;
   &lt;mat-icon&gt;menu&lt;/mat-icon&gt;
  &lt;/button&gt;
  
  &lt;/mat-toolbar&gt;
  
  .mat-toolbar {
  
      position: fixed;
      z-index: 999;
  }
  </code></pre>