feat: Sticky List Headers / Dividers (Angular)

[wilk-polarny]

Feature Request

Ionic version:
[x] 4.x

Describe the Feature Request
I would like to have sticky list elements (headers/dividers) which stick to the top of the content while scrolling until the end of the element has been reached. Similar elements can be found for example within table views in iOS (iOS Contacts app).

Such a feature would be very useful for collapsing/expanding lists.

Describe Preferred Solution
A solution similar to https://github.com/jonaszuberbuehler/ion-affix
Unfortunately, ion-affix only supports Ionic 3.x

Preferably there should be some kind of (angular/etc.) directive which can be set on <ion-list-header> and other relevant items.

Describe Alternatives
No alternatives considered.

Related Code
No related code.

Additional Context

[liamdebeasi]

Thanks for the issue. You should be able to do something similar with a bit of CSS: https://codepen.io/liamdebeasi/pen/GVXeoo

Does this work for your use case?

[wilk-polarny]

@liamdebeasi , thank you.

Your suggested solutions works to a certain degree. Problem is, that sticky elements will overlay other sticky ones instead of pushing them out of the view (like on iOS). There are also unwanted side effects if for example the ion-content has a padding-topattribute set which results in a gap between the navigation bar and the stickied element with contents passing by beneath it during scrolling.

Also weird things happen with borders on ion-itemelements together with the sticky and z-index attributes when --border-width and --inset-border-width being applied which we have to figure out for ourselves.

Any suggestions about how to let elements being pushed out of view, rather than being overlapped? It appears that any siblings will overlap.

Thank you.

[wilk-polarny]

On iOS items are being actually pushed out of view, so this is not an issue to use anymore.
We had to tweak a few things to workaround issues with Ionic, but our solution works so far. Thank you!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.