Shrinking Headers Like Facebook With the Ionic Framework

Shrinking headers have become very popular in apps like Facebook, where you need to scroll much content. When you start scrolling, the headers disappears very smooth to grant your users more space on the screen to read the actual content.

In this post I will show you how to implement this neat little feature inside your Ionic Framework app with the help of a custom ion from the Ionic team.

Setup a simple App

We start with a blank Ionic app and install the header shrink ion with bower. Additional I recommend to add the cordova plugin for styling your statusbar, on this way you can get an even more natural looking behaviour inside your app!

ionic start devdactic-shrinking blank
cd devdactic-shrinking
bower install ionic-ion-header-shrink --save
cordova plugin add org.apache.cordova.statusbar

To use the custom ion you need to inject the dependency to your angular module, so open your app.js and append it to your dependency array:

angular.module('starter', ['ionic', 'ionic.ion.headerShrink'])

Additional we need to load the file from our index.html so add this line before your app.js import:

<script src="lib/ionic-ion-header-shrink/ionic.headerShrink.js"></script>

Now we are ready to add the feature to our app with just some simple steps!

Add the Shrinking Header feature

Before we add the actual feature, we need to add 2 things: Some css and a custom statusbar color. The first one is very, simple, just open your style.css and add these lines:

ion-content {
  top: 0 !important;
}

This is needed so our content behaves correctly with our shrinking header. Next I changed the color of the status bar to match the -positive color of the Ionic Header bar. If your header bar has a different color, you should obviously pick a color that matches your bar! To style the bar, just add this to your app.js inside the $ionicPlatform.ready function:

if(window.StatusBar) {
  StatusBar.overlaysWebView(false);
  StatusBar.backgroundColorByHexString('#387ef5');
}

Finally, add the header-shrink ion to your ion-content inside your index.html

<body ng-app="starter">
	<ion-pane>
	  <ion-header-bar class="bar-positive">
		<h1 class="title">Ionic Blank Starter</h1>
	  </ion-header-bar>

	  <ion-content header-shrink scroll-event-interval="5">
		<div style="height: 50px;"></div>

		<div class="list card" ng-repeat="n in [1,2,3,4]">
		  <div class="item item-body">
			<p>
			  Bacon ipsum dolor amet beef cow pork, picanha sirloin filet mignon alcatra bacon ham.
			  Landjaeger fatback jowl short ribs shoulder sirloin tongue picanha.
			  Boudin tail strip steak shankle, turkey capicola pancetta tongue pork chop drumstick meatloaf.
			  Venison tongue fatback strip steak ribeye kevin, capicola bacon.
			</p>
		  </div>
		</div>
	   </div>
	  </ion-content>
	</ion-pane>
</body>

Additional I added a little spacing at the start of our content to achieve the perfect result for a shrinking header. Inside the content I added a little ng-repeat with some dummy text to get a working example with scrolling. That’s all! Now you can run your app and see your natural looking shrinking header in action!

See a video version of this article below.

http://youtu.be/x08xV48seSU

If this tutorial was helpful, follow me on twitter @schlimmson and leave a comment/ tweet it! Don’t forget to subscribe to my newsletter to receive new posts and infos via mail!

So long, Saimon

Shrinking Headers Like Facebook With the Ionic Framework Last update: 2015-03-13

Setup a simple App

Add the Shrinking Header feature