Components - Sticky header

<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;
}

<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;
}