Getting a sticky header to "push up" and get replaced by another header

[Eerlikh]

So this is a bit of a challenge, I’m trying to create a list with sticky headers that replace each other as you scroll. Problem is I can only find the code I need in jquery and I can’t figure out how to do that in ionic. Anyone have any ideas or has done this before? I would prefer a solution that relies more on angular 2.

Here is the code I have :

Plunker

So far I just took the jquery code I found and required jquery as a dependency.

This is the thread where I found the jquery code:

Getting a sticky header to "push up", like in Instagram's iPhone app using CSS and jQuery

[luukschoen]

If you’re using a simple ion-list, add the sticky attribute to the ion-list-header. It automatically adds css property sticky to the header, which should work in the modern webviews.

[Eerlikh]

Do you possibly have a demo or example?

[luukschoen]

Something like this:

<ion-content>
  <ion-item-group>
    <ion-item-divider color="light" sticky>A</ion-item-divider>
    <ion-item>Angola</ion-item>
    <ion-item>Argentina</ion-item>
  </ion-item-group>
</ion-content>

[Eerlikh]

That’s just a sticky header, does it get pushed upward by another header when you scroll? It gets overlaid, not pushed up. Is there a way to push it up instead?

If you observe closely the jquery version pushes up the header the way our iphone address book does.

[Eerlikh]

This is specifically the type of behavior I’m looking for but using Angular 2 or Ionic 2.

emilsjolander/StickyListHeaders

Does anyone have a component I can use that does that?

[luukschoen]

Sticky is meant to do exactly what you’re asking for. Pretty sure it pushes up the other list-divider

[Eerlikh]

That’s the thing, it doesn’t push up, it overlaid when I tried it. My UX designer wasn’t happy lol.

[luukschoen]

Isn’t this the exact same?

[Eerlikh]

This is what mine looks like. Maybe I’m doing something wrong? I’m viewing this in my web browser.

[luukschoen]

Could you please show me your code? Because I just tested it in the browser as well. Which browser are you on?

[Eerlikh]

This is what my central-panel.html looks like:

  <ion-content>
    <ion-item-group>
      <ion-item-divider color="light" sticky>A</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="dark" sticky>B</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>C</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>A</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>D</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>A</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>B</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>C</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>A</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
    </ion-item-group>
  </ion-content>

There is not much in the ts file besides a few json calls.

Then I have a few basic ionic 2 app components that contain the central panel.

This is what my app.html looks like:

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

This is what my app.component.ts file looks like:

import { Component, ViewChild } from '@angular/core';

import { Platform, MenuController, Nav } from 'ionic-angular';
import { Http } from '@angular/http';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { CenterPanel } from '../pages/center-panel/center-panel';
import { RightPanel } from '../pages/right-panel/right-panel';


@Component({
  selector: 'main-app',
  templateUrl: 'app.html'
})
export class MyApp {
  ms = 'Testing Branch';


  @ViewChild(Nav) nav: Nav;

  // make CenterPanel the root (or first) page
  rootPage: any = CenterPanel;
  pages: Array<{title: string, component: any}>;

  constructor(
    public http: Http,
    public platform: Platform,
    public menu: MenuController,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen
  ) {
    this.http = http;
    this.initializeApp();

    // set our app's pages
    this.pages = [
      { title: 'CenterPanel', component: CenterPanel },
      { title: 'RightPanel', component: RightPanel }
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    this.nav.setRoot(page.component);
  }

}

And finally my app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { CenterPanel } from '../pages/center-panel/center-panel';
import { RightPanel } from '../pages/right-panel/right-panel';
import { HttpModule, JsonpModule } from '@angular/http';
import { PullJson } from '../services/panel-data.service';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    CenterPanel,
    RightPanel
  ],
  imports: [
    HttpModule,
    JsonpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    CenterPanel,
    RightPanel
  ],
  providers: [
    PullJson,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

[Eerlikh]

I’m using the chrome browser atm. Let me try some other ones.

Update
Have the same issue on Safari which is where I need it to work.

[luukschoen]

It hasn’t got anything to do with browser. You forgot to wrap it iniside an ion-list… I assumed in my first post that you knew ion-item-group should be nested within an ion-list.

[Eerlikh]

Nope, this is my first Ionic 2 project, I’ll try this out now, thank you for assisting me.

[Eerlikh]

<ion-content>
  <ion-list >
      <ion-item-divider color="light" sticky>A</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>B</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>C</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>A</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>D</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>A</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>

      <ion-item-divider color="light" sticky>B</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>C</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>A</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
  </ion-list>
</ion-content>

Like this? Still getting the same issue, sorry.

[Eerlikh]

<ion-content>
  <ion-list>
    <ion-item-group>
      <ion-item-divider color="light" sticky>A</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>B</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>C</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>A</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>D</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>A</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>B</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>C</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item-divider color="light" sticky>A</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
    </ion-item-group>
  </ion-list>
</ion-content>

Doesn’t work either

[Eerlikh]

Hold up, I think I know what I’m doing wrong.

[Eerlikh]

Final Solution:

<ion-content>
  <ion-list>
    <ion-item-group>
      <ion-item-divider color="light" sticky>A</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
    </ion-item-group>
    <ion-item-group>
      <ion-item-divider color="light" sticky>B</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
    </ion-item-group>
    <ion-item-group>
      <ion-item-divider color="light" sticky>C</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
    </ion-item-group>
    <ion-item-group>
      <ion-item-divider color="light" sticky>B</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
    </ion-item-group>
    <ion-item-group>
      <ion-item-divider color="light" sticky>B</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
    </ion-item-group>
    <ion-item-group>
      <ion-item-divider color="light" sticky>B</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
    </ion-item-group>
    <ion-item-group>
      <ion-item-divider color="light" sticky>B</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
    </ion-item-group>
    <ion-item-group>
      <ion-item-divider color="light" sticky>B</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
    </ion-item-group>
    <ion-item-group>
      <ion-item-divider color="light" sticky>B</ion-item-divider>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
      <ion-item>Angola</ion-item>
      <ion-item>Argentina</ion-item>
    </ion-item-group>
  </ion-list>
</ion-content>

[luukschoen]

Yes like that. It works now I assume?