Components - Sticky header

Sticky content is one that will stay positioned once the user scrolls past it (i.e: stuck in position). Unlike position: fixed;, sticky content is limited by its container and will stop scrolling once the end of the parent element is reached.

To make an element sticky, you need to add the following CSS:

position: sticky; top: 0;

Sticky content example

Basic Example

Using a sticky header on top of a visualization (in this example a graph) to show some relevant information, such as selected filters, or a link to see the dataset in the Explore page.