Sticky Panel Animation

I’ve been working with some of the new triggers (Scrolled etc). Very nice when creating infinite scroll, a lot cleaner code! I’m trying to reimplement my sticky headers and the techniques I used before won’t work with Scrolled. What I need is a version of ScrollingAnimation that can trigger when I reach an offset relative to the parent of the ScrollView. I want it to:

  • Freeze the element at an offset of the parent of ScrollView (in my case at the top)
  • Release the element when the next element comes and “pushes it” up out of view
  • Do the same in reverse but in their bottom positions

Together with ZOffset we then have sticky headers with nice clean code that is easy to understand.

The reason this is tricky is because I need to recalculate all the ScrollingAnimation From="{shiftIn}" To="{shiftOut}" when I mutate the list for the infinite scroll, and even though that isn’t too hard because I have known heights, I am barely making the 60fps budget as is. I don’t think this is ever going to be fast enough in JS.

This would be such an awesome feature that I believe will be used A LOT! It would also be dead easy to explain. So don’t be afraid, start cooking! ;D

Hi Sebastian

The sticky panel is a very neat feature, can you share with us some basic example?

It’s a feature suggestion. Whereas I have faked it by using ScrollingAnimation. Unfortunately the code gets very complex quickly when combined with infinite scroll. Also, it is impossible to implement unless you have fixed heights for your rows.

It is also very hard to get smooth scrolling due to a lot of Observable array manipulation when adding and removing items in the infinite scroll.

I am hoping Fusetools can implement a StickyPanelAnimation (whatever you want to call it) so one can do this declaratively and not have to worry about calculating the break points for ScrollingAnimation.

You’re correct that we are missing a few features to do the sticky headers correctly. I’ll add an issue to our set of scroller issues to try and make this possible.

That sounds awesome! Let me know if you want me to send you my code so you can see a typical use case. I’d be happy to give some feedback during dev too because this is essential in my app and I would love to be able to simplify the code.

Any chance of getting any update on the progress of this issue?

Whereas sticky headers is pretty standard in apps, I understand that there might be issues in the implementation of scrollview rendering that could delay shipping this feature.