How to create a sticky section header for list?

How-to Discussions
1

Any examples or pointers? I want it to behave in the same way as native list section headers on iOS.

2

I asked about this a while back, is this the same thing you want? But no update on it.

3

Probably means one has to wrap a native list view or create a custom class.

4

Edwin, I am going to experiment a bit with this: https://www.fusetools.com/docs/fuse/triggers/scrollinganimation

5

(edit) WARNING! This only works in PREVIEW, not when you do a BUILD. It is possible to create sticky section headers, but you need to put the fixed header container in the ScrollView and animate it on scroll so it appears to be fixed. See comments in the related issue: https://www.fusetools.com/community/forums/bug_reports/scrollinganimation_works_in_preview_but_broken_in

This is the general gist, you’ll need to set the heights properly and calculate the startShift/endShift for each header and fill it with more content:

<Page Background="#000">

    <JavaScript>
    
        exports.listData = [
            {type: 'header', 'title': 'A title', startShift: 56, endShift: 90},
            {type: 'content', 'title': 'Content'},
            {type: 'header', 'title': 'A title', startShift: 110, endShift: 146},
            {type: 'content', 'title': 'Content'},
            
        ]
    </JavaScript>


    <Panel>

        <Panel ClipToBounds="true" Height="36" Alignment="Top">
            <StackPanel ux:Name="fixedListHeader">
                <Each Items="{listData}">

                    <Match Value="{type}">
                        <Case String="header">
                        
                            <Panel ux:Name="listHeader" Color="#33d" Height="36">
                                <Text Color="#fff" Value="{title}" Alignment="CenterLeft" Margin="10,5,10,0" />
                                <Rectangle Color="#fff" Height="1" Alignment="Bottom" />
                            </Panel>
                            
                        </Case>
                    </Match>

                </Each>
            </StackPanel>
        </Panel>

        
        <ScrollView ux:Name="view">

            <StackPanel Color="#fff" ItemSpacing="1">

                <Each Items="{listData}">

                    <Match Value="{type}">
                        <Case String="header">
                            <Panel ux:Name="listHeader" Color="#33d" Height="36">
                                <Text Color="#fff" Value="{title}" Alignment="CenterLeft"  Margin="10,5,10,0" />

                                <ScrollingAnimation From="{startShift}" To="{endShift}">
                                    <Move Target="fixedListHeader" Y="-1" RelativeTo="Size" RelativeNode="listHeader"/>
                                </ScrollingAnimation>
                            </Panel>
                        </Case>

                        <Case String="content">
                            <Panel ux:Name="listHeader" Color="#33d" Height="20">
                                <Text Color="#fff" Value="{title}" Alignment="CenterLeft"  Margin="10,5,10,0" />
                            </Panel>
                        </Case>
                    </Match>

                </Each>

                <Panel Height="36" />

            </StackPanel>

        </ScrollView>

    </Panel>
</Page>
6

New solution available, check:

https://www.fusetools.com/community/forums/howto_discussions/sticky_headers_and_infinite_scroll_using_ux-expres

or

https://www.fusetools.com/examples/sticky-headers