From a3733fe4ce4033e1490669e7866bed763b0777b2 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 25 Nov 2014 18:27:07 -0600
Subject: [PATCH] Readme

---
 README.md             | 10 ++++++++++
 demo/index.html       |  1 +
 ionic.headerShrink.js |  2 +-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e944ef0..f3ac218 100644
--- a/README.md
+++ b/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>`.
diff --git a/demo/index.html b/demo/index.html
index 5393023..6c7fe2a 100644
--- a/demo/index.html
+++ b/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">
diff --git a/ionic.headerShrink.js b/ionic.headerShrink.js
index 467d74d..90312ca 100644
--- a/ionic.headerShrink.js
+++ b/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) {