Shrinking header title not shrinking

I am having a trouble with shrinking header.

The bar-header does scroll up as expected but the view title doesn’t move.

my JS:

.directive('fakeStatusbar', function() {
return {
restrict: 'E',
replace: true,
template: '<div class="fake-statusbar"><div class="pull-left">Carrier</div><div class="time">3:30 PM</div><div class="pull-right">50%</div></div>'
 .directive('headerShrink', function($document) {
   var fadeAmt;

 var shrink = function(header, content, amt, max) {
amt = Math.min(44, amt);
fadeAmt = 1 - amt / 44;
ionic.requestAnimationFrame(function() {[ionic.CSS.TRANSFORM] = 'translate3d(0, -' + amt + 'px, 0)';
  for(var i = 0, j = header.children.length; i < j; i++) {
    header.children[i].style.opacity = fadeAmt;

 return {
restrict: 'A',
link: function($scope, $element, $attr) {
  var starty = $scope.$eval($attr.headerShrink) || 0;
  var shrinkAmt;
  var header = $document[0].body.querySelector('.bar-header');
  var headerHeight = header.offsetHeight;
  $element.bind('scroll', function(e) {
    var scrollTop = null;
      scrollTop = e.detail.scrollTop;
    }else if({
      scrollTop =;
    if(scrollTop > starty){
      // Start shrinking
      shrinkAmt = headerHeight - Math.max(0, (starty + headerHeight) - scrollTop);
      shrink(header, $element[0], shrinkAmt, headerHeight);
    } else {
      shrink(header, $element[0], 0, headerHeight);

my CSS:

 .fake-statusbar {

height: 20px;
max-height: 20px;
font-size: 12px;
box-sizing: border-box;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 4;
color: #fff;
padding: 2px 3px 3px 3px;
.fake-statusbar .time {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
.fake-statusbar .pull-left { float: left; }
.fake-statusbar .pull-right { float: right; }

.bar-header {
 height: 64px !important;
.bar-header > * {
 margin-top: 20px !important;

 top:0 !important

any one know where i am going wrong ?

Did you solved this? Could you help me?

i did not have any luck yet

Can you post a codepen with your case because the regular codepen works i have my own version that simulates de googlePlay shrinking header and i did some tweaks on that but show us what did you have in order to help you

Hey guys @rflea @Cmaden @pavei I took a shot at this and got a plugin together that is probably what you guys are looking for. Just published to bower!!

Ionic Scroll Sista

this is what i get with android tabs over laping with with header can you help?

Just made a major improvement to it so great chance your issue is fixed in 1.0.1!! Check it out, added 6 different configurations including support for subheaders, headers, and tabs all on the same view.

Check it out the video here

doesn’t work at all now ?

You have Jquery loaded in your App ?

plzzzsuggest some method to hide header on scroll on windows phone also using ionic???

To slove this issue use
In html tag