Readme

README.md

@@ -16,4 +16,14 @@ To use this, add a `<ion-header-bar>` and a `<ion-content>`. Add the `header-shr
 </ion-content>
 ```
 
+It's also useful to add an empty spacer element inside the content to make sure it doesn't go up under the bar:
+
+```html
+<ion-content>
+  <div style="height: 50px"></div>
+</ion-content>
+```
+
 Also make sure to include the `ionic.ion.headerShrink` angular module in your app.
+
+Note, this should also work with an `<ion-nav-bar>`.

demo/index.html

@@ -38,6 +38,7 @@
         <h1 class="title">Things</h1>
       </ion-header-bar>
       <ion-content header-shrink scroll-event-interval="5">
+        <div style="height: 50px;"></div>
         <div class="list card">
 
           <div class="item item-avatar">

ionic.headerShrink.js

@@ -28,7 +28,7 @@ angular.module('ionic.ion.headerShrink', [])
 
       var fadeAmt;
 
-      var header = $document[0].body.querySelector('ion-header-bar');
+      var header = $document[0].body.querySelector('.bar-header');
       var headerHeight = header.offsetHeight;
 
       function onScroll(e) {