Angular Material 2 - Fixed header demo.

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
    <link rel="stylesheet" href="https://unpkg.com/@angular/material@2.0.0-beta.6/prebuilt-themes/deeppurple-amber.css">
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <app-root>
    loading...
  </app-root>
  </body>

</html>

/* Styles go here */

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
  angularVersion = ''; //picks up latest
}
else {
  angularVersion = '@' + window.AngularVersionForThisPlunker;
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    '@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion  + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
    '@angular/material': 'https://unpkg.com/@angular/material@2.0.0-beta.6/bundles/material.umd.js',
    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js',
    'hammerjs': 'https://unpkg.com/hammerjs@2.0.8/hammer.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule)

// //our root app component
// import {Component, NgModule, VERSION} from '@angular/core'
// import {BrowserModule} from '@angular/platform-browser'

// @Component({
//   selector: 'my-app',
//   template: `
//     <div>
//       <h2>Hello {{name}}</h2>
//     </div>
//   `,
// })
// export class App {
//   name:string;
//   constructor() {
//     this.name = `Angular! v${VERSION.full}`
//   }
// }

// @NgModule({
//   imports: [ BrowserModule ],
//   declarations: [ App ],
//   bootstrap: [ App ]
// })
// export class AppModule {}

import { NgModule } from '@angular/core';
import {
  MaterialModule,
  MdNativeDateModule,
  // Form Controls
  MdAutocompleteModule,
  MdCheckboxModule,
  MdDatepickerModule,
  MdInputModule,
  MdRadioModule,
  MdSelectModule,
  MdSliderModule,
  MdSlideToggleModule,
  // Navigation
  MdMenuModule,
  MdSidenavModule,
  MdToolbarModule,
  // Layout
  MdListModule,
  MdGridListModule,
  MdCardModule,
  MdTabsModule,
  // Buttons, Indicators, and Icons
  MdButtonModule,
  MdButtonToggleModule,
  MdChipsModule,
  MdIconModule,
  MdProgressSpinnerModule,
  MdProgressBarModule,
  // Popups and Modals
  MdDialogModule,
  MdTooltipModule,
  MdSnackBarModule
} from '@angular/material';

@NgModule({
  imports: [
    MaterialModule,
    MdNativeDateModule,
    MdAutocompleteModule,
    MdCheckboxModule,
    MdDatepickerModule,
    MdInputModule,
    MdRadioModule,
    MdSelectModule,
    MdSliderModule,
    MdSlideToggleModule,
    MdMenuModule,
    MdSidenavModule,
    MdToolbarModule,
    MdListModule,
    MdGridListModule,
    MdCardModule,
    MdTabsModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdChipsModule,
    MdIconModule,
    MdProgressSpinnerModule,
    MdProgressBarModule,
    MdDialogModule,
    MdTooltipModule,
    MdSnackBarModule
  ],
  exports: [
    MdAutocompleteModule,
    MdCheckboxModule,
    MdDatepickerModule,
    MdInputModule,
    MdRadioModule,
    MdSelectModule,
    MdSliderModule,
    MdSlideToggleModule,
    MdMenuModule,
    MdSidenavModule,
    MdToolbarModule,
    MdListModule,
    MdGridListModule,
    MdCardModule,
    MdTabsModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdChipsModule,
    MdIconModule,
    MdProgressSpinnerModule,
    MdProgressBarModule,
    MdDialogModule,
    MdTooltipModule,
    MdSnackBarModule
  ],
})
export class AngularMaterialModule { }

import {NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {BrowserModule} from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import {FormsModule} from '@angular/forms';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from 'app/app.component';
import {AngularMaterialModule} from './ngmaterial.module';
import {HomeModule} from './home/home.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    AppRoutingModule,
    AngularMaterialModule,
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'src/app.component.html',
  styleUrls: ['src/app.component.css']
})
export class AppComponent {
  constructor() {
  }
}

<div style="position:absolute;top:0;left:0;right:0;bottom:0;">
  <md-sidenav-container #sidenav style="height:100%;width:100%;">
    <md-sidenav mode="over" #sidenav style="min-width:220px;">
      <p>Sidenav Content</p>
    </md-sidenav>
    <md-toolbar color="primary" style="min-height:64px;">
      <span>
          <button style="background-color:transparent;border-style:none;cursor:pointer;" (click)="sidenav.open()">
              <i class="material-icons toolbar-link-icon" style="color:white;">menu</i>
          </button>
      </span>
    <span>Fixed Header Example</span>
    </md-toolbar>
    <div class="inner-sidenav-content">
      <div style="padding-top:2em;padding-bottom:2em;">
        <router-outlet></router-outlet>
      </div>
    </div>
  </md-sidenav-container>
</div>

.inner-sidenav-content {
  overflow: auto;
  position: absolute;
  bottom:0;
  left:0;
  right:0;
  top:64px;
}

import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';

const appRoutes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes
    )
  ],
  exports: [
    RouterModule
  ],
  providers: [
  ]
})
export class AppRoutingModule { }

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  templateUrl: 'src/home/home.component.html'
})
export class HomeComponent {
  
}

<div class="flex-container">
  <md-card>
    <md-card-header>
      <md-card-title>Your Content</md-card-title>
      <md-card-subtitle>Scroll away...</md-card-subtitle>
    </md-card-header>
    <md-card-content>
      <div style="height:2000px;">
        <p>Scroll scroll scroll.</p>
      </div>
    </md-card-content>
  </md-card>
</div>

import { NgModule } from '@angular/core';
import { HomeComponent } from './home.component';
import { HomeRoutingModule } from './home-routing.module';
import { AngularMaterialModule } from '../ngmaterial.module';

@NgModule({
  imports: [
    HomeRoutingModule,
    AngularMaterialModule
  ],
  declarations: [HomeComponent]
})
export class HomeModule { }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';

const homeRoutes: Routes = [
  { path: 'home', component: HomeComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(homeRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class HomeRoutingModule { }