fix(subheader/sticky): Stick subheader to content instead of parent.

The `$mdSticky` service used to stick it's contents to the parent
of the `<md-content>` container. This resulted in some odd styling
issues and the inability to have two lists with sticky subheaders
side-by-side.

This fix appends the subheaders directly to the `<md-content>` to
fix this issue.

Also, updated subheaders to use `<div>` tags instead of `<h2>`.

fixes #3535

src/components/sticky/sticky.js

@@ -28,7 +28,7 @@ angular.module('material.components.sticky', [
  *     If not provided, it will use the result of `element.clone()`.
  */
 
-function MdSticky($document, $mdConstant, $compile, $$rAF, $mdUtil) {
+function MdSticky($document, $mdConstant, $$rAF, $mdUtil) {
 
   var browserStickySupport = checkStickySupport();
 
@@ -95,7 +95,9 @@ function MdSticky($document, $mdConstant, $compile, $$rAF, $mdUtil) {
       };
       self.items.push(item);
 
-      contentEl.parent().prepend(item.clone);
+      $mdUtil.nextTick(function() {
+        contentEl.prepend(item.clone);
+      });
 
       debouncedRefreshElements();
 
@@ -169,22 +171,22 @@ function MdSticky($document, $mdConstant, $compile, $$rAF, $mdUtil) {
         setCurrentItem(null);
 
       // Going to next item?
-      } else if (isScrollingDown && self.next) {
-        if (self.next.top - scrollTop <= 0) {
+      } else if (isScrollingDown) {
+        if (self.next && self.next.top - scrollTop <= 0) {
           // Sticky the next item if we've scrolled past its position.
           setCurrentItem(self.next);
         } else if (self.current) {
           // Push the current item up when we're almost at the next item.
-          if (self.next.top - scrollTop <= self.next.height) {
-            translate(self.current, self.next.top - self.next.height - scrollTop);
+          if (self.next && self.next.top - scrollTop <= self.next.height) {
+            translate(self.current, scrollTop + (self.next.top - self.next.height - scrollTop));
           } else {
-            translate(self.current, null);
+            translate(self.current, scrollTop);
           }
         }
 
       // Scrolling up with a current sticky item?
-      } else if (!isScrollingDown && self.current) {
-        if (scrollTop < self.current.top) {
+      } else if (!isScrollingDown) {
+        if (self.current && scrollTop < self.current.top) {
           // Sticky the previous item if we've scrolled up past
           // the original position of the currently stickied item.
           setCurrentItem(self.prev);
@@ -194,9 +196,9 @@ function MdSticky($document, $mdConstant, $compile, $$rAF, $mdUtil) {
         // the current item up from the top as it scrolls into view.
         if (self.current && self.next) {
           if (scrollTop >= self.next.top - self.current.height) {
-            translate(self.current, self.next.top - scrollTop - self.current.height);
+            translate(self.current, scrollTop + (self.next.top - scrollTop - self.current.height));
           } else {
-            translate(self.current, null);
+            translate(self.current, scrollTop);
           }
         }
       }

src/components/subheader/subheader.js

@@ -46,11 +46,11 @@ function MdSubheaderDirective($mdSticky, $compile, $mdTheming, $mdUtil) {
     replace: true,
     transclude: true,
     template: (
-    '<h2 class="md-subheader">' +
+    '<div class="md-subheader">' +
     '  <div class="md-subheader-inner">' +
     '    <span class="md-subheader-content"></span>' +
     '  </div>' +
-    '</h2>'
+    '</div>'
     ),
     link: function postLink(scope, element, attr, controllers, transclude) {
       $mdTheming(element);

src/components/subheader/subheader.scss

@@ -30,15 +30,6 @@ $subheader-sticky-shadow: 0px 2px 4px 0 rgba(0,0,0,0.16) !default;
       margin: 0;
     }
 
-    .md-subheader:after {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      top: 0;
-      right: -$subheader-margin-right;
-      content: '';
-    }
-
     transition: 0.2s ease-out margin;
 
     &.md-sticky-clone {