ion-affix is a lightweight Angular directive for Ionic framework to have sticky affix elements.

Fork the project on Github.

Initial idea is this gist of Collin Donahue-Oponski

Requirements

Directive requires no additional dependencies. Just Ionic and Angular.

Demos

You can find demos at Codepen: http://codepen.io/collection/DrxWPr/

Demo : simple

See the Pen ion-affix simple demo by Ali Ok (@aliok) on CodePen.

Demo : group header

See the Pen ion-affix group demo by Ali Ok (@aliok) on CodePen.

Demo : cards

See the Pen ion-affix cards demo by Ali Ok (@aliok) on CodePen.

Demo : performance

See the Pen ion-affix performance demo by Ali Ok (@aliok) on CodePen.

Installation with Bower

  • Issue bower install ion-affix.
  • Reference the JS file in your html:
<script src="/bower_components/ion-affix/ion-affix.js"></script>

Manual installation

  • Download the project zip from here and extract it.
  • Reference the JS file in your html:
<script src="/bower_components/ion-affix/ion-affix.js"></script>

Instructions

<article class="post" ng-repeat="post in posts">
    <h1 ion-affix data-affix-within-parent-with-class="post">{{ post.title }}</h1>
    <main>
        <p>{{ post.body }}</p>
    </main>
</article>

In the example above, title <h1> will be the sticky header for everything within post <article>.

You have to add 2 things to item that you want as sticky affix:

  1. ion-affix attribute
  2. data-affix-within-parent-with-class with CSS class of the container that you want to have the sticky element for (<article> in the example above).

Don’t forget to add 'ion-affix' to your Angular module dependencies!

Notes

Quoting the Gist:

  • Must be used within an <ion-scroll> or <ion-content>
  • You must group each header and contents together within a container element (this container element defines the area in which the header should stay).
  • Not tested with collection-repeat – only with ng-repeat (please let me know if it works and I’ll update)
  • This directive works by cloning the sticky header and appending it between the outer scroll container and inner scroll container – as a sibling of the scrollbar, for reference. Thus, you might need to edit your CSS if it doesn’t already apply correctly to the cloned header element.

All of them apply to ion-affix as well.

Credits

Initial idea is this gist of Collin Donahue-Oponski

I converted the idea in there into a project.

Using that code as a basis, I

  • made the code more beautiful

  • documented the code

  • got rid of dependencies to Underscore.js and jQuery

  • fixed a couple of alignment issues (e.g. when there are fixed or absolute positioned elements already on top. or when the affix container had bottom margin)

  • published it as a Bower package so that folks can use it w/o copy-pasting the Gist and creating the file etc.

  • implemented a couple of demos