What this does:
<ion-scroll>, this directive creates sticky item headers that get bumped out of the way by the next item.
- Needs UnderscoreJS for its
- Must be used within an
- 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.
Example: If you want to render a list of posts with sticky post titles, you could create markup like this:
<article class="post" ng-repeat="post in posts track by post.id"> <h1>Post Title</h1> <main> <p>Long post body with many paragraphs...</p> </main> </article>
Then all we need to do is make sure it's within an
<ion-scroll>, and add the
affix-within-container=".post" attribute to the
affix-within-container=".post" tells the
<h1> that it is the sticky header for everything within it's closest
.post ancestor. i.e.