Como deixar o <md-toolbar> fixo

Estou iniciando o projeto e gostaria de saber como deixar meu componente sempre posicionado no topo da página.

app-nav-bar:

<div>    
  <md-toolbar class="gradient" md-scroll-shrink>
    <button md-icon-button [md-menu-trigger-for]="menu">
      <md-icon>menu</md-icon>
    </button>

    <span>
      ????????
    </span>            
  </md-toolbar>

  <md-menu x-position="before" #menu="mdMenu">
    <button md-menu-item (click)="openHome()"> Home </button>
    <button md-menu-item (click)="openPortifolio()"> Portifólio </button>
    <button md-menu-item (click)="openSobre()"> Sobre </button>
    <button md-menu-item (click)="openContatos()"> Contatos </button>
  </md-menu>
</div>

app.component.html

<app-nav-bar></app-nav-bar>
<router-outlet></router-outlet>

Como deixar o "app-nav-bar" sempre visivel no topo enquanto posso "scrollar" a página a vontade ?