poordeveloper / ion-sticky

A lightweight Angular directive for Ionic framework to have sticky list headers

ion-sticky

Super simple to use

Just add ion-sticky to ion-content, it will detect dividers and make the active one sticky.

If you are using collection-repeat, please refer to this gist.

https://gist.github.com/Poordeveloper/e6a1714ea399f95c779f

Demo

http://codepen.io/Poordeveloper/pen/BNpxrm

Install

bower install ion-sticky --save

Usage

angular.module('ion-sticky-demo', ['ion-sticky']);

<ion-content ion-sticky>
    <ion-list>
        <ion-item class="item-divider"> A </ion-item>
        <ion-item> A1 </ion-item>
        <ion-item> A2 </ion-item>
        ...
        <ion-item class="item-divider"> B </ion-item>
        ....
    </ion-list>
</ion-content>

Using custom style class for sticky header (default uses assertive):

<ion-content ion-sticky ion-sticky-class="positive">
    <ion-list>
        <ion-item class="item-divider"> A </ion-item>
        <ion-item> A1 </ion-item>
        <ion-item> A2 </ion-item>
        ...
        <ion-item class="item-divider"> B </ion-item>
        ....
    </ion-list>
</ion-content>

ion-sticky's Issues

Expression inside item-divider not cloned

hey there! got an issue, there's an expression I'm setting in the item-divider wrapper, and when the sticky header is cloned its not cloned with it, seems like it only does clone the "text" in it

here's an example
http://codepen.io/JFernandoG/pen/xOmPpL

If you click anywhere inside the ion-content the "dinamicNumber" will be added +1 everytime, and when scroll and the sticky is created and you keep clicking its not updated, but when you go back to the top, the change in the scope is there.

Maybe this could be solved with another element using ng-model but would like to know if there's a solutions within ion-sticky

Doesn't detect if dividers added dynamically to scope

Hello,

Thank you for this! This is terrific and I am planning to use it my project. One issue I am facing is that the dividers are not auto-detected during scope change. I am dynamically inserting the list based on what the user selects, so it doesn't add them to the dividers[] array.

I can possibly write a scope watch, but I am a little unsure about the performance impact, so thought of asking you directly!

Cheers, Krishna.

collection repeat support?

Hi,
is it possible work with collection-repeat? i have tried your "demo-collection-repeat.html", but seems it is not working, is it still progressing or ?

plz advise.

thx.

Is this possible without ionic?

I was testing some other frameworks using sticky headers and noticed that a lot of them don't work on mobile, and this works very well and smoothly. I don't know Ionic well enough, but is it possible to abstract out Ionic and achieve the same results?

[Feature] Custom Style for stiky divider

Thanks for the extension,

I would like to request the configuration for color when the item-divider is sticky.

Can I make a pull request for this?

Thanks

Not wrking with ng-repeat

Hello, i made a simple list with ng-repeat. But the list dividers are not sticky. Does this work with ng-repeat?

<select> in divider doesn't work correctly

I'm trying to have a divider include an HTML select box. When I select an option (other than the first item) and then scroll, the select reverts back to the initial option. If you scroll back to the top of the list, the select changes back to what it should have been set to.

Here is a code pen displaying the issue:

http://codepen.io/anon/pen/bdvjyq

Jumpy behavior

The directive shows/hides the cloned list divider elements at almost the right time, but not quite perfectly. This is due to an error in the position-related calculations.

Available for ionic 2?

Issues when using in conjunction with ng-hide

I'm using sticky headers for a list of items over the next couple of days. If a user does not have any things for a specific day, we are hiding that header as well as the list so that the day is just skipped.

Any ideas?

http://codepen.io/anon/pen/GoEmVN

There's a Enable Disable or Destroy Create?

There's a Enable Disable or Destroy create?

In my app something i have to remove the item-divider and re-add it latter.
If i remove theme i got this error from ion-sticky
Uncaught TypeError: n.prop is not a function

If i re-add the item-divider it fix itself

In fact i hide item-divider display none with class and CSS and it make the error i mentionned above

use with top tabs

I have tabs at the top of my content, but the scrolling content has to go far under the tabs before the sticky is shown, how do you use this with top-tabs?

Anchorscroll goes to far

Hi,
When I do $ionicScrollDelegate.anchorScroll.

$scope.goToday = function(){
   $location.hash('today-true');
   $ionicScrollDelegate.anchorScroll(true);
};

it goes to far, the item stops below the header, not below the divider.