Problem: Scrollable Container Section Stickiness

med

30 min

Try to create sticky section headers that remain fixed within a scrollable container using position: sticky relative to the container.

Problem description

You have a <div class="scroll-container"> of fixed height with overflow-y: scroll. Inside, there are multiple <section> elements, each with a heading. As the user scrolls the container, the heading of the current section should stick to the top of the container until the next section heading pushes it off.

Goal

Ensure each section heading sticks to the top of the scrollable container during its scroll interval.

Constraints

Use CSS only (no JavaScript is allowed).
The scroll container height is fixed at 400px.
Stickiness only applies within the scroll container.
Headings must not stick beyond their section boundary.

Sample visual output

Here’s what the output would look like: