fix(item): sticky items

ionic/components/item/item.scss

@@ -21,6 +21,24 @@
   color: $list-text-color;
 }
 
+.item-group {
+  display: block;
+}
+
+.item-group-title {
+  display: block;
+  min-height: 30px;
+  font-weight: 500;
+  width: 100%;
+  z-index: 100;
+  z-index: 1000;
+  &.sticky {
+    position: -webkit-sticky;
+    position: sticky;
+  	top: 0px;
+  }
+}
+
 a.item,
 button.item.item {
   margin: 0;

ionic/components/item/modes/ios.scss

@@ -22,9 +22,30 @@ $item-ios-thumbnail-size:              5.6rem !default;
 $item-ios-note-color:                  darken($item-ios-border-color, 10%) !default;
 $item-ios-forward-icon-color:          $item-ios-border-color !default;
 
+$item-ios-divider-bg:                 #f5f5f5 !default;
+$item-ios-divider-color:              #222 !default;
+$item-ios-divider-padding:            5px 15px !default;
 
 .list {
 
+
+  .item-group-title {
+    padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
+    background-color: $item-ios-divider-bg;
+    color: $item-ios-divider-color;
+    //padding-top: ceil($item-padding / 2);
+    //padding-bottom: ceil($item-padding / 2);
+  }
+  .item-group {
+    // Make sure the first and last items don't have borders
+    > .item:first-of-type:before {
+      border-top: none !important;
+    }
+    > .item:last-of-type:after {
+      border-top: none !important;
+    }
+  }
+
   .item {
     margin-top: -1px;
     padding-right: ($item-ios-padding-right / 2);

ionic/components/item/modes/md.scss

@@ -25,9 +25,27 @@ $item-md-thumbnail-size:              8rem !default;
 $item-md-note-color:                  darken($item-md-border-color, 10%) !default;
 $item-md-forward-icon-color:          $item-md-border-color !default;
 
+$item-md-divider-bg:                 #fff !default;
+$item-md-divider-color:              #222 !default;
+$item-md-divider-padding:            5px 15px !default;
 
 .list {
 
+  .item-group-title {
+    padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
+    background-color: $item-md-divider-bg;
+    color: $item-md-divider-color;
+  }
+  .item-group {
+    // Make sure the first and last items don't have borders
+    > .item:first-of-type:before {
+      border-top: none !important;
+    }
+    > .item:last-of-type:after {
+      border-top: none !important;
+    }
+  }
+
   .item {
     margin-top: -1px;
     padding-right: ($item-md-padding-right / 2);

ionic/components/list/list.scss

@@ -18,8 +18,6 @@
 }
 
 .list[inset] {
-  overflow: hidden;
-
   ion-header {
     background-color: $list-background-color;
   }

ionic/components/list/test/sticky/main.html

@@ -3,7 +3,7 @@
 
   <ion-content>
 
-    <ion-list inset>
+    <ion-list>
       <ion-item-group *ng-for="#group of groups">
         <ion-item-group-title>{{group.title}}</ion-item-group-title>
         <ion-item *ng-for="#item of group.items">