A demo of making a header that shrinks based on the user scrolling (like Facebook's iOS app).
Switch branches/tags
Nothing to show
Clone or download
Latest commit a3733fe Nov 26, 2014
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.cordova Readme Mar 18, 2014
demo Readme Nov 26, 2014
.gitignore Readme Mar 18, 2014
LICENSE Readme Mar 18, 2014
README.md Readme Nov 26, 2014
bower.json Commit Nov 26, 2014
config.xml Readme Mar 18, 2014
ionic.headerShrink.js Readme Nov 26, 2014

README.md

Ionic Ion Header Shrink

An Ion for making a header that shrinks based on the user scrolling (like Facebook's iOS app).

To use this, add a <ion-header-bar> and a <ion-content>. Add the header-shrink attribute to the <ion-content> element:

<ion-header-bar class="bar-positive">
  <div class="buttons">
    <button class="button button-icon ion-navicon"></button>
  </div>
  <h1 class="title">Things</h1>
</ion-header-bar>
<ion-content header-shrink>
</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:

<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>.