Sticky header demo code

src/demo-app/demo-app-module.ts

@@ -76,10 +76,12 @@ import {
   MdToolbarModule,
   MdTooltipModule,
   OverlayContainer,
-  StyleModule
+  StyleModule,
+  StickyHeaderModule
 } from '@angular/material';
 import {CdkTableModule} from '@angular/cdk';
 import {TableHeaderDemo} from './table/table-header-demo';
+import {StickyHeaderDemo} from './sticky-header/sticky-header-demo';
 
 /**
  * NgModule that includes all Material modules that are required to serve the demo-app.
@@ -118,7 +120,8 @@ import {TableHeaderDemo} from './table/table-header-demo';
     MdTooltipModule,
     MdNativeDateModule,
     CdkTableModule,
-    StyleModule
+    StyleModule,
+    StickyHeaderModule
   ]
 })
 export class DemoMaterialModule {}
@@ -184,6 +187,7 @@ export class DemoMaterialModule {}
     PlatformDemo,
     TypographyDemo,
     ExpansionDemo,
+    StickyHeaderDemo
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer},

src/demo-app/demo-app/demo-app.ts

@@ -67,7 +67,8 @@ export class DemoApp {
     {name: 'Tooltip', route: 'tooltip'},
     {name: 'Platform', route: 'platform'},
     {name: 'Style', route: 'style'},
-    {name: 'Typography', route: 'typography'}
+    {name: 'Typography', route: 'typography'},
+    {name: 'Sticky Header', route: 'sticky-header'}
   ];
 
   constructor(private _element: ElementRef) {

src/demo-app/demo-app/routes.ts

@@ -36,6 +36,7 @@ import {DatepickerDemo} from '../datepicker/datepicker-demo';
 import {TableDemo} from '../table/table-demo';
 import {TypographyDemo} from '../typography/typography-demo';
 import {ExpansionDemo} from '../expansion/expansion-demo';
+import {StickyHeaderDemo} from '../sticky-header/sticky-header-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -74,4 +75,5 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'style', component: StyleDemo},
   {path: 'typography', component: TypographyDemo},
   {path: 'expansion', component: ExpansionDemo},
+  {path: 'sticky-header', component: StickyHeaderDemo}
 ];

src/demo-app/sticky-header/sticky-header-demo.html

@@ -0,0 +1,33 @@
+<div class="demo-sticky">
+  <div class="demo-centered" cdk-scrollable>
+    <div>
+      <h1>Sticky-header Demo</h1>
+    </div>
+
+    <div class="demo-container">
+
+      <div>
+        <div cdkStickyHeader class="demo-header-style demo-header-color3" >
+          <h2>Unread Messages</h2>
+        </div>
+        <P *ngFor="let item of items">{{item.name}} :  {{item.messages}}</P>
+      </div>
+
+      <div cdkStickyRegion >
+        <div cdkStickyHeader class="demo-header-style demo-header-color2">
+          <h2>Late Messages</h2>
+        </div>
+        <P *ngFor="let item of items">{{item.name}} :  {{item.messages}}</P>
+        <P *ngFor="let item of items">{{item.name}} :  {{item.messages}}</P>
+      </div>
+
+      <div cdkStickyRegion>
+        <div cdkStickyHeader class="demo-header-style demo-header-color1" >
+          <h2>Read Messages</h2>
+        </div>
+        <P *ngFor="let item of items">{{item.name}} :  {{item.messages}}</P>
+        <P *ngFor="let item of items">{{item.name}} :  {{item.messages}}</P>
+      </div>
+    </div>
+  </div>
+</div>

src/demo-app/sticky-header/sticky-header-demo.scss

@@ -0,0 +1,80 @@
+.demo-sticky {
+  .demo-centered {
+    text-align: left;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    height: 500px;
+    overflow: auto;}
+
+  button {
+    position: fixed;
+    margin: 16px;
+    z-index: 99;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    font: 14px/1.5 Helvetica, Arial, sans-serif;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+  }
+
+  h1 {
+    font-size: 20px;
+    padding: 20px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  h2 {
+    font-size: 20px;
+    padding: 20px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  p {
+    text-indent: 4em;
+    padding:15px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  div{
+    margin: 0; border: 0; padding: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+}
+
+.mat-radio-button {
+  display: block;
+}
+
+.demo-container {
+  margin: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.demo-header-style{
+  -webkit-appearance: none;
+  padding: 20px;
+}
+
+.demo-header-color1 {
+  background: #cecece;
+}
+
+.demo-header-color2 {
+  background: #cea7a7;
+}
+
+.demo-header-color3 {
+  background: #c2eae5;
+}

src/demo-app/sticky-header/sticky-header-demo.ts

@@ -0,0 +1,27 @@
+import {Component} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {CdkStickyRegion, CdkStickyHeader} from '@angular/material';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'sticky-header-demo',
+  templateUrl: 'sticky-header-demo.html',
+  styleUrls: ['sticky-header-demo.css'],
+})
+
+export class StickyHeaderDemo {
+  items: any[] = [
+    {name: 'Min', messages: 'Brunch is this weekend?'},
+    {name: 'Li', messages: 'Yes'},
+    {name: 'Chan', messages: 'Looking'},
+    {name: 'Chan', messages: 'Forward'},
+    {name: 'Chan', messages: 'To It !'},
+    {name: 'Min', messages: 'Branch is this weekend?'},
+    {name: 'Eat', messages: 'Green Peppers'},
+    {name: 'Chan', messages: 'Where?'},
+    {name: 'Jack', messages: 'Pirate!'},
+    {name: 'Jone', messages: 'Black pearl'},
+    {name: 'Jack', messages: 'Back to the sea!'},
+  ];
+}