fix bugs and deleted unused tag id in HTML files

Author: sllethe

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

@@ -1,12 +1,15 @@
 
 <div class="demo-sticky">
     <div class="centered" cdk-scrollable>
-        <h1>Sticky-header Demo</h1>
+        <div>
+            <h1>Sticky-header Demo</h1>
+        </div>
+
         <div id="testFor" class="container">
 
-            <div id="theStickyHeaderLalala" style="margin: 0; border: 0; padding: 0;">
-                <div cdkSticky parent="false"  class="rside1" >
-                    <h2 style = "z-index: 999; color: #ff3d00">Heading 1</h2>
+            <div>
+                <div cdkStickyHeader class="rside1" >
+                    <h2>Heading 1</h2>
                 </div>
                 <P>test sticky-header</P>
                 <P>test sticky-header</P>
@@ -25,13 +28,12 @@ <h2 style = "z-index: 999; color: #ff3d00">Heading 1</h2>
                 <P>test sticky-header</P>
                 <P>test sticky-header</P>
                 <P>test sticky-header</P>
-
             </div>
 
 
-            <div cdkStickyViewport style="margin: 0; border: 0; padding: 0;">
-                <div cdkSticky style="color:#030" class="rside2">
-                    <h2 style = "z-index: 999; color: blue">Heading 2</h2>
+            <div cdkStickyRegion >
+                <div cdkStickyHeader class="rside2">
+                    <h2>Heading 2</h2>
                 </div>
                 <P>test sticky-header</P>
                 <P>test sticky-header</P>
@@ -53,12 +55,11 @@ <h2 style = "z-index: 999; color: blue">Heading 2</h2>
                 <P>test sticky-header</P>
                 <P>test sticky-header</P>
                 <P>test sticky-header</P>
-
             </div>
 
-            <div cdkStickyViewport style="margin: 0; border: 0; padding: 0;">
-                <div cdkSticky class="rside3" >
-                    <h2 style="color: #4a148c">Heading 3</h2>
+            <div cdkStickyRegion>
+                <div cdkStickyHeader class="rside3" >
+                    <h2>Heading 3</h2>
                 </div>
                 <P>test sticky-header</P>
                 <P>test sticky-header</P>
@@ -99,7 +100,6 @@ <h2 style="color: #4a148c">Heading 3</h2>
                 <P>test sticky-header</P>
                 <P>test sticky-header</P>
                 <P>test sticky-header</P>
-
             </div>
         </div>
     </div>

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

@@ -10,9 +10,6 @@ body {
 
 }
 
-
-
-
 .demo-sticky {
   .centered {
     text-align: center;
@@ -27,6 +24,7 @@ body {
     z-index: 99;
   }
 }
+
 .mat-radio-button {
   display: block;
 }
@@ -92,12 +90,10 @@ header {
   //width: 100%;
 }
 
-
 h2 {
   font-size: 20px;
   -webkit-appearance: none;
   -moz-appearance: none;
-
 }
 
 p {
@@ -107,6 +103,7 @@ p {
 }
 
 div{
+  margin: 0; border: 0; padding: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
 }

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

@@ -1,9 +1,6 @@
 import {Component} from '@angular/core';
-import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {StickyParentDirective, StickyHeaderDirective} from '@angular/material';
-export {StickyParentDirective, StickyHeaderDirective};
-
 
 
 @Component({
@@ -13,8 +10,4 @@ export {StickyParentDirective, StickyHeaderDirective};
     styleUrls: ['sticky-header-demo.css'],
 })
 
-
-export class StickyHeaderDemo {
-    constructor() {
-    }
-}
+export class StickyHeaderDemo { }