Dynamic sticky headers with variable lists

advanced-prototyping

#1

Hello friends!

I’m trying to create the iPhone’s contact list type of interaction where a specific header remains sticky until the matching list is exhausted and is replaced by another header and so on and so forth…I’ve attached the below interaction for reference.

Could you please post an .rp file (RP9 compatible) for this please? (NOTE: I’m using different repeaters for each list)

Thanks!
-Mani B


#2

…You first :face_with_raised_eyebrow:

This could be a fair amount of work to set up so anything you have to start with could help…

In the meantime I can describe the approach I’d use… First of all, there are lots of posts and tutorials here for sticky headers (e.g., Sticky scrolling header in a dynamic panel ) and I’ll assume you know how to do a basic sticky header, where a pinned dynamic panel is shown/hidden based on the amount of scroll for the window or dynamic panel, or the position of content underneath the header.

In your example it looks like you’d have a repeater for each country/football league, with the first row being a header, like “ITALY - Serie A”. Your sticky header would need to have a version of each possible repeater header row, and when the list of repeaters is scrolled, the sticky header would be shown and set to show a copy of the repeater header row immediately behind it.

One way to do this would be a dynamic panel with one state per repeater, with content to match the corresponding repeater’s header row. In the list’s Scrolled or Dragged event (depending on how you are implementing the list movement) conditional cases could test if “area of This” is over area of {repeater}. I suggest starting with the bottom-most repeater and ending with the top-most. So, if you had repeaters for Italy, Denmark, Germany, Spain, then Case 1 would test if the sticky header is over the Spain repeater, Case 2 would test for Else If Germany repeater, etc. ending with test for Else If Italy repeater, then an Else If true to hide the sticky header.

Another approach would be to create a “header repeater” inside the sticky dynamic panel. This might be an easier way to get the same content as the main repeater’s header rows, because you could use the same repeater design, just only with headers from the other repeaters. You might even be able to have each repeater add a row as they load. Then, you could filter this header repeater to show only the appropriate row. Maybe each repeater could test the scroll or move amount against their y-position, and if it is at or below the top, filter the header repeater based on its own header content.

If you want to retain the subtle slide-up as the sticky header changes state/content, then instead of filtering the header repeater, you could scroll the sticky dynamic panel the same amount as its height (e.g., [[This.height]] ).