# StickyHeader
> This page is about FlutterFlow Studio (the visual builder), not FlutterFlow (the app builder you use by describing your app).
URL: https://docs.flutterflow.io/resources/ui/widgets/built-in-widgets/sticky-header
The StickyHeader widget keeps a header visible while users scroll through content below it. For example, a search bar can stay in view while users browse a list of results.
The **StickyHeader** widget keeps a header visible while users scroll through content below it. For example, a search bar can stay in view while users browse a list of results.
The StickyHeader widget has two sections:
- **StickyHeader Header:** Holds the widget that remains visible while the content scrolls, such as a search bar or title.
- **StickyHeader Content:** Holds the content below the header, such as a ListView or GridView.
:::caution[Scrollable parent]
The Column or ListView containing the StickyHeader must handle the main scrolling. Turn on **Primary** for that widget. If you add another ListView or GridView inside **StickyHeader Content**, turn off **Primary** for the inner one.
The inner list or grid may still scroll separately. To make an inner ListView scroll with the rest of the page, turn on **Shrink Wrap** and choose a non-scrolling **Scroll Physics** option for it.
:::
## Adding a StickyHeader
1. Add a **Column** or **ListView** to the page. Turn on **Primary** for this Column or ListView so it handles scrolling. If you use a Column, also turn on **Scrollable**.
2. From **Base Elements**, add a **StickyHeader** inside that Column or ListView.
3. Add the widget you want to keep visible inside **StickyHeader Header**.
4. Add the content that users will scroll through inside **StickyHeader Content**. You can use widgets such as a ListView or GridView to display a collection of items.
The following demo shows a search bar above a user list: