Lesson 6 of 8
Sticky header
- 12 min
- 5 checks
- 3 hints
- Go to task
Goal
A header that stays put while the list scrolls under it
Explanation
In a long list, the heading disappears with the first scroll and the user forgets where they are. position: sticky keeps an element in its normal place until it reaches a threshold you set, then it sticks there for as long as its parent is in view.
That threshold is required: sticky without inset-block-start (or top) does nothing. The element sticks to its nearest ancestor that can scroll, which is why the container needs a limited height and overflow-y: auto.
Be careful: putting overflow: hidden on any element between the header and the container you have in mind makes that element the reference instead, and since it doesn't scroll, nothing sticks. Give the header a background too, or the rows will show through it.
Your task
Make .panel scroll its content inside itself, pin .bar to the top of the panel with position: sticky and inset-block-start: 0, and give the bar a background that hides whatever scrolls under it.
Checks
5 checks- The container scrolls its content inside itself
- The header is sticky
- The header sticks exactly at the top of the container
- The header stays visible at the top of the container after scrolling
- The header has a background that hides what scrolls under it