Is it possible to use ion-affix inside an ion-scroll?

[daghendrik]

If I have an ion-list inside an ion-scroll, as shown in the example below, the "ion-affixed" ion-list-header won't stick.
If I remove the ion-scroll tags, the header sticks, but then the list is placed directly on the page and not in its own scroll area, the latter being my intention.

Does ion-affix support this use case? If not, is there a possible workaround to make ion-affix support having an ion-list with sticky headers inside an ion-scroll element?

Thanks for creating this!

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding #content>

  <ion-scroll scrollY="true">
    <ion-list>
      <ion-list-header ion-affix [content]="content">Sticky Header 1</ion-list-header>
      <ion-item>List item 1</ion-item>
      <ion-item>List item 2</ion-item>
      <ion-item>List item 3</ion-item>
      <ion-item>List item 4</ion-item>
      <ion-item>List item 5</ion-item>
      <ion-item>List item 6</ion-item>
      <ion-item>List item 7</ion-item>
      <ion-item>List item 8</ion-item>
      <ion-item>List item 9</ion-item>
      <ion-item>List item 10</ion-item>
      <ion-item>List item 11</ion-item>
      <ion-item>List item 12</ion-item>
    </ion-list>
  </ion-scroll>

  <ion-slides>
    <ion-slide>
      <h1>Slide 1</h1>
    </ion-slide>
    <ion-slide>
      <h1>Slide 2</h1>
    </ion-slide>
    <ion-slide>
      <h1>Slide 3</h1>
    </ion-slide>
  </ion-slides>

</ion-content>

[jonaszuberbuehler]

Hmm interesting. Will check it out ASAP and post back.

[jonaszuberbuehler]

@daghendrik To clarify: you set a fixed height on the ion-scroll (like for example 70%) and the header should be sticky on top of the ion-scroll, not the page (ie not the ion-content). And the page scrolling (scrolling on the ion-content) should not affect the sticky at all. Did I get this right?

[daghendrik]

@jonaszuberbuehler That's correct.
I forgot to add the styling code to the ion-scroll and ion-slides tags. In a more complete example, they should both have had a fixed height of 50%.

[jonaszuberbuehler]

Ok thx. Working on an example. Bad thing is though that ion-content and ion-scroll don't share the same API for scrolling events (no idea why that is). Will try to work with an adapter somehow to abstract the needed parts.

[jonaszuberbuehler]

@daghendrik Can you give it a try with npm install --save ion-affix@dev? You most likely want to add overflow:hidden to the ion-scroll (otherwise the pushing up of an affixed header looks a bit strange).

[jonaszuberbuehler]

@daghendrik Did you have a chance to test it?

[daghendrik]

@jonaszuberbuehler Sorry for the late reply. I just tested it with my example app and it works flawlessly! Thank you so much :-)

[Missile71]

I'm trying to use ionaffix with ion-scroll but get always Object(...) is not a function
this my code

<ion-scroll class="timeline" scrollY="true"> <ion-list> <ion-list-header ion-affix [content]="content">Group 1</ion-list-header> <ion-item>prova</ion-item> <ion-item>prova</ion-item> <ion-item>prova</ion-item> <ion-item>prova</ion-item> <ion-list-header ion-affix [content]="content">Group 2</ion-list-header> <ion-item>prova</ion-item> <ion-item>prova</ion-item> <ion-item>prova</ion-item> <ion-item>prova</ion-item> <ion-list-header ion-affix [content]="content">Group 3</ion-list-header> <ion-item>prova</ion-item> <ion-item>prova</ion-item> <ion-item>prova</ion-item> <ion-item>prova</ion-item> </ion-list> </ion-scroll>

ion-scroll is fixed height 30% and overflow hidden. I do something wrong, but I don't understand what