# A StickyPanel

**URL:** <https://forums.fusetools.com/t/a-stickypanel/6583>\
**Category:** Feature Suggestions\
**Created:** [May 25, 2016, 8:22pm UTC](https://forums.fusetools.com/t/a-stickypanel/6583 "2016-05-25T20:22:21Z")\
**Posts on this page:** 1\
**Page:** 1

<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:** [May 25, 2016, 8:22pm UTC](https://forums.fusetools.com/t/a-stickypanel/6583/1 "2016-05-25T20:22:21Z")

</div>

On the Web there’s something in CSS called `Position: Sticky`. Which you can see an example here in browsers that support it: [http://html5-demos.appspot.com/static/css/sticky.html](http://html5-demos.appspot.com/static/css/sticky.html)

Basically there are times where we want a panel to stay in view until the next stickypanel comes into place, like how instagram keeps the top bar with the username on top of each post.

So what if we gotten a `StickyPanel` that is used like so:

```auto

<ScrollView>
    <StackPanel>
        <Each Items="{posts}">
            <DockPanel>
                <StickyPanel Dock="Top" Top="0">
                    <Text Value="{username}" />
                </StickyPanel>
                <!-- Rest of post data goes here -->
            </DockPanel>
        </Each>
    </StackPanel>
</ScrollView>

```

So the `StickyPanel` would stay on top while scrolling until the other `StickyPanel` takes place over the one before, just like instagram

The `Top` property tells it how many `Points/Pixels/Percentages` from the top of the parent viewport till it sticks.