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

<div class="placeholder-content">
    <section class="sticky-content">
        <h2 class="sticky-content-title">
            Sticky content is here (scroll to test)
        </h2>
    </section>
    <h3 class="placeholder-title">
        Page content is here
    </h3>
</div>
<hr class="placeholder-separator">
<div class="placeholder-content">
    <br>
    <h3 class="placeholder-title">
        Page content is here
    </h3>
    <section class="sticky-content">
        <h2 class="sticky-content-title">
            Sticky content is here (scroll to test)
        </h2>
    </section>
    <h3 class="placeholder-title">
        More content here
    </h3>
</div>
/* Sticky Content
   ========================================================================== */
.sticky-content {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #ffe4c4;
    color: #FFFFFF;
    padding: 3rem 20px;
}
.sticky-content-title {
    margin: 0;
}
.placeholder-content {
    height: 1000px;
    background-color: yellow;
    background: linear-gradient(180deg, rgba(255,255,0,1) 0%, rgba(255,140,0,1) 100%);
}
.placeholder-title {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-left: 20px;
}
.placeholder-separator {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

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.

<ods-dataset-context context="shanghairanking"
                     shanghairanking-domain="public"
                     shanghairanking-dataset="shanghai-world-university-ranking"
                     shanghairanking-parameters="{'sort':'world_rank','timezone':'Europe/Berlin'}">
    <section class="sticky-summary-wrapper">
        <div class="sticky-summary">
            <div class="sticky-summary-data">
                <h3>Top 10</h3>
                <div>
                    Dataset name: <strong>{{ shanghairanking.name | capitalize }} </strong>
                </div>
                <div>
                    Number of records: <strong>{{ shanghairanking.dataset.metas.records_count | number }}</strong>
                </div>
            </div>
            <a href="https://data.opendatasoft.com/explore/dataset/shanghai-world-university-ranking%40public/information/?sort=world_rank" class="sticky-summary-button">
                View
            </a>
        </div>
    </section>
    <ods-chart single-y-axis="true"
               display-legend="false"
               align-month="true">
        <ods-chart-query context="shanghairanking"
                         field-x="country"
                         maxpoints="10"
                         sort="serie1-1">
            <ods-chart-serie expression-y="world_rank_int"
                             chart-type="column"
                             function-y="COUNT"
                             color="#142E7B"
                             scientific-display="true">
            </ods-chart-serie>
        </ods-chart-query>
    </ods-chart>
</ods-dataset-context>
/* Sticky Summary
========================================================================== */
.sticky-summary-wrapper {
    position: sticky;
    z-index: 10;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    box-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.sticky-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}
.sticky-summary-data {
    flex: 1 1 auto;
    margin-right: 1rem;
}
.sticky-summary-button {
    color: #FFFFFF;
    background-color: #EC643C;
    border: 1px solid #EC643C;
    font-size: 1rem;
    font-weight: normal;
    padding: .5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}
.sticky-summary-button:hover {
    text-decoration: none;
    background-color: #df4516;
    border-color: #df4516;
}