Sticky header

How to use it

Use when a short header with a title and one or two actions should stay visible while a long list or page scrolls beneath it. On a real page, drop the fixed height and overflow on .dcl-sticky-header so the bar sticks to the viewport, and keep it short so it does not eat small screens. Replace the link href and content.

Accessibility

The scrolling demo box is a labelled region (role="region" with aria-label) and contains links, so keyboard users can Tab into it and the box scrolls to keep the focused link visible; the sticky bar's solid background means nothing shows through it. The bar heading is #0f172a on #ffffff (17.85:1), its link #1d4ed8 on #ffffff (6.70:1), entry dates #475569 on #f8fafc (7.24:1) and entry text #0f172a on #f8fafc (17.06:1). scroll-padding-top stops focused content from hiding under the bar.

Source (copy-ready)

Copy code

<div class="dcl-sticky-header" role="region" aria-label="Release notes, scrollable">
  <div class="dcl-sticky-header__bar">
    <h2 class="dcl-sticky-header__title">Release notes</h2>
    <a class="dcl-sticky-header__action" href="../about.html">Subscribe</a>
  </div>
  <ol class="dcl-sticky-header__list">
    <li class="dcl-sticky-header__entry"><span class="dcl-sticky-header__date">Version 3.4</span><p class="dcl-sticky-header__text">Search now matches words inside file names, not only at the start.</p></li>
    <li class="dcl-sticky-header__entry"><span class="dcl-sticky-header__date">Version 3.3</span><p class="dcl-sticky-header__text">Exports keep folder structure. <a class="dcl-sticky-header__link" href="../index.html">Export guide</a></p></li>
    <li class="dcl-sticky-header__entry"><span class="dcl-sticky-header__date">Version 3.2</span><p class="dcl-sticky-header__text">Dark mode follows your system setting automatically.</p></li>
    <li class="dcl-sticky-header__entry"><span class="dcl-sticky-header__date">Version 3.1</span><p class="dcl-sticky-header__text">Uploads resume after a dropped connection. <a class="dcl-sticky-header__link" href="../index.html">Upload limits</a></p></li>
    <li class="dcl-sticky-header__entry"><span class="dcl-sticky-header__date">Version 3.0</span><p class="dcl-sticky-header__text">New sharing panel with per-person permissions.</p></li>
  </ol>
</div>
<style>
.dcl-sticky-header { box-sizing: border-box; max-width: 28rem; height: 16rem; overflow-y: auto; scroll-padding-top: 3.5rem; border: 1px solid #cbd5e1; border-radius: 0.5rem; font: inherit; color: #0f172a; background-color: #f8fafc; }
.dcl-sticky-header__bar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 1rem; border-bottom: 1px solid #cbd5e1; color: #0f172a; background-color: #ffffff; }
.dcl-sticky-header__title { margin: 0; font-size: 1rem; color: #0f172a; background-color: #ffffff; }
.dcl-sticky-header__action { font-weight: 600; color: #1d4ed8; background-color: #ffffff; }
.dcl-sticky-header__action:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-sticky-header__list { margin: 0; padding: 0.5rem 1rem 1rem; list-style: none; }
.dcl-sticky-header__entry { padding: 0.75rem 0; border-bottom: 1px solid #e2e8f0; color: #0f172a; background-color: #f8fafc; }
.dcl-sticky-header__date { display: block; font-size: 0.8125rem; font-weight: 600; color: #475569; background-color: #f8fafc; }
.dcl-sticky-header__text { margin: 0.25rem 0 0; overflow-wrap: anywhere; color: #0f172a; background-color: #f8fafc; }
.dcl-sticky-header__link { color: #1d4ed8; background-color: #f8fafc; }
.dcl-sticky-header__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
</style>