Sticky header

position:sticky pins an element relative to its nearest scrolling container while that container is in view.

Code

<div style="height:150px;overflow:auto;border:1px solid #ccc">
  <header style="position:sticky;top:0;background:#1f6feb;color:#fff;padding:0.75rem">Sticky header</header>
  <p style="padding:1rem">Content 1</p>
  <p style="padding:1rem">Content 2</p>
  <p style="padding:1rem">Content 3</p>
  <p style="padding:1rem">Content 4</p>
</div>

Preview

Explanation

top:0 sets how far from the container's top the element "sticks". sticky only works within a parent that scrolls, or as part of a scrolling page.

If sticky isn't working, check whether a parent element has overflow:hidden — that breaks sticky positioning.

Related tools

Accordion (details/summary)

A native accordion built on details/summary, accessible out of the box, no JS.