# How to create a sticky section header for list?

**URL:** <https://forums.fusetools.com/t/how-to-create-a-sticky-section-header-for-list/6459>\
**Category:** How-to Discussions\
**Created:** [August 26, 2016, 4:03pm UTC](https://forums.fusetools.com/t/how-to-create-a-sticky-section-header-for-list/6459 "2016-08-26T16:03:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sebastian](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/sebastian/32/594_2.png) [@sebastian](https://forums.fusetools.com/u/sebastian)\
**Post date:** [August 26, 2016, 4:03pm UTC](https://forums.fusetools.com/t/how-to-create-a-sticky-section-header-for-list/6459/1 "2016-08-26T16:03:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [August 26, 2016, 7:27pm UTC](https://forums.fusetools.com/t/how-to-create-a-sticky-section-header-for-list/6459/2 "2016-08-26T19:27:39Z")

</div>

I asked about [this](https://www.fusetools.com/community/forums/feature_requests/a_stickypanel) a while back, is this the same thing you want? But no update on it.

---

<div class="post-metadata">

**Author:** ![sebastian](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/sebastian/32/594_2.png) [@sebastian](https://forums.fusetools.com/u/sebastian)\
**Post date:** [August 27, 2016, 11:36am UTC](https://forums.fusetools.com/t/how-to-create-a-sticky-section-header-for-list/6459/3 "2016-08-27T11:36:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sebastian](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/sebastian/32/594_2.png) [@sebastian](https://forums.fusetools.com/u/sebastian)\
**Post date:** [August 28, 2016, 2:07pm UTC](https://forums.fusetools.com/t/how-to-create-a-sticky-section-header-for-list/6459/4 "2016-08-28T14:07:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sebastian](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/sebastian/32/594_2.png) [@sebastian](https://forums.fusetools.com/u/sebastian)\
**Post date:** [August 28, 2016, 3:41pm UTC](https://forums.fusetools.com/t/how-to-create-a-sticky-section-header-for-list/6459/5 "2016-08-28T15:41:43Z")

</div>

(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](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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![sebastian](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/sebastian/32/594_2.png) [@sebastian](https://forums.fusetools.com/u/sebastian)\
**Post date:** [March 9, 2017, 4:47pm UTC](https://forums.fusetools.com/t/how-to-create-a-sticky-section-header-for-list/6459/6 "2017-03-09T16:47:30Z")

</div>

New solution available, check:

[https://www.fusetools.com/community/forums/howto\_discussions/sticky\_headers\_and\_infinite\_scroll\_using\_ux-expres](https://www.fusetools.com/community/forums/howto_discussions/sticky_headers_and_infinite_scroll_using_ux-expres)

or

[https://www.fusetools.com/examples/sticky-headers](https://www.fusetools.com/examples/sticky-headers)