ionic-team / ionic-ion-header-shrink

A demo of making a header that shrinks based on the user scrolling (like Facebook's iOS app).

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

ionic-ion-header-shrink's Issues

Would be lovely to have a CDN version

... if only to be able to link to it for JSFiddle creation!

I tried to add it in my project with side bar templates but I always get error

I get error on
e.detail.scrollTop
it says e.detail is undefined, then I tried something like
if(e.detail){
scrollTop = e.detail.scrollTop;
}else if(e.target){
scrollTop = e.target.scrollTop;
}
it always give me scroll top value of 1

I am using the directive in my code by just adding header-shrink directive to content and using with ion-nav-bar

Does not handle ion-content with overflow-scroll="true"

jsfiddle to show: http://jsfiddle.net/70o990mu/1/

Ionic 3, Angular 5

Is this working with todays stable versions?

And how to "include" ionic.ion.headerShrink into you App's Module?

manage mulitple header-bars when using ion-nav-bar

When I use an ion-nav-bar with an nav-view-controller I found out that there are multiple header-bars rendered into the DOM (active, cache, entering etc.)

We have to shrink all of them when scrolling down. For now the querySelector selects only the first element matching the ".bar-header" class.

I'm already working on a fork but maybe you guys already got an idea.

Cannot read property 'scrollTop' of undefined when using jQuery

When using jQuery in a project the following line gives the error in the title:
var scrollTop = e.detail.scrollTop;

It has to be replaced with this line to work:
var scrollTop = e.originalEvent.detail.scrollTop;

An if statement has to be used to detect if jQuery is used but I don't know how to do that.

Update
This fix seems to work in iOS but not in Android. This can be seen in both chrome developer tools device mode and the actual devices.

Understanding headerShrink and ionic.CSS.TRANSFORM

Hello community !

I got a question for you : how works :

style[ionic.CSS.TRANSFORM]

can i use :

style[ionic.CSS.BACKGROUNDCOLOR]

I'm looking to Make the bar header opacity to 1 when i scroll down and fix the tabs-nav (as a sub-header like airbnb app). sorry i'm a js/angular beginner ...

What's the best way to do that for you ? Am i on the right direction ?

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

// directive permettant d'animer le profil ( cover)
.directive('headerShrink', function($document) {
return {
restrict: 'A',
link: function($scope, $element, $attr,amt, max) {
var resizeFactor, scrollFactor, blurFactor;
var amt = Math.min(50, amt);
var fadeAmt = 1 - amt / 50;
var opacityValue = 1 - fadeAmt;

  // selectors
  var coverheader = $document[0].body.querySelector('header');
  var barheader = $document[0].body.querySelector('.bar.bar-route');
  var tabnav = $document[0].body.querySelector('.tabs-nav');

  // animation on scroll
  $scope.$on('userDetailContent.scroll', function(event,scrollView) {
    if (scrollView.__scrollTop >= 0) {
      scrollFactor = scrollView.__scrollTop/3.5;
      coverheader.style[ionic.CSS.TRANSFORM] = 'translate3d(0, +' + scrollFactor + 'px, 0)';

       // barheader.style.[ionic.CSS.TRANSFORM] = 'rgba(255,255,255,'+opacityValue+')';

    } else if (scrollView.__scrollTop > -50) {
      resizeFactor = -scrollView.__scrollTop/100 + 0.99;
      coverheader.style[ionic.CSS.TRANSFORM] = 'scale('+resizeFactor+','+resizeFactor+')';

      // tabnav.addClass('fixed');

    }
  });
}

}
});
`

Graphical issues with ion-side-menus

When used with ion-side-menus, the header does not shrink correctly.

jsfiddle to show the issue: http://jsfiddle.net/9ntrhd8y/1/

Ionic 2

Did anyone update this to work with Ionic 2?

headerShrink down when scrolling down in any view scroll position

Hi @mlynch Could you extend the headerShrink to work when scroll down. I tried to make this change but I fail.

If you see in Facebook iOS app, headerShrink works this way. The header bar can be shrinking down in any view scroll position.

Also, could you extend to use it in subheader-bar and nav-bar?

Thanks and regards