Ionic2 shrinking header/scroll sista alternative?

Ionic Framework ionic-v3
1

Have anyone implemented a shrinking header like instagram? ie, similar to Scroll Sista

Thanks.

2 Likes
2

I’m guessing/hoping Ionic will eventually build this in as official option. Looks like they tried it for v1 but I think it was too buggy.

3

Is there anything out there by now? Anyone?

4

Hi guys,

Here is the code I am using. I am new to ionic 2 so feel free to make improvements.

So, here are the steps to get it working:

Place the following in the .ts file you need the header shrinker.

Import shrink.ts

import {Shrink} from ..

Add provider

@Component({
  templateUrl: 'build/pages/mypage/mypage.html',
  providers: [Shrink]
})

Add ViewChild

export class SomeClass {
@ViewChild(Content) content: Content;

Add Shrink to constructor

constructor(private header: Shrink) {

Add funcion

ngAfterViewInit() {
    this.header.init(this.content);
  }

In your .html add the following to ion-header

<ion-header [ngStyle]="header.returnStyle()">

You may want to add fullscreen to your ion-content

<ion-content fullscreen>

Place shrink.ts in your project to import it

https://gist.github.com/jfsemaan/1b767c6f3630cc471baebb7bd5f60ba5

5

I’ve created a directive which is up on NPM and could use some testing.

Ionic Shrinkage