A sticky header names the group you are in while you scroll

What it is

If a section header scrolls away with its items, someone stopped mid-section no longer knows which class they are in. A sticky section header pins the current stretch’s name to the top of the list viewport, and replaces it only when the next section’s header pushes it off. It answers “which group am I in now.” It is not freezing column names on a table, and not making the header easier to tap.

Why it happens

Scrolling is moving through structure. Once the section title has left the viewport, current place lives in memory, and memory is unreliable after a fast flick across many rows. Pinning moves “current section name” out of memory and back into view, so the scan can continue inside the section without rolling back to read the title. Replacement has to follow section boundaries: the next title pushes the previous name away, and that handover is how people see that the section changed. A single sticky bar that never changes copy, or that shows the list’s overall title, is fake location. The pin should cost one row of height; more steals the comparison window. It pins to the list’s own scroll container; pinning to the page carries the section name onto unrelated blocks.

Studying it

Stop in the middle of a long grouped list, comparing a header that has scrolled away with a sticky header, then ask “which group are you in” and continue looking for a target in that group. Independent variables: sticky or not, whether the next section animates a push-off. Dependent variables: correctness of current place, rollbacks to re-read the section name. Asking immediately after a fast flick exposes memory failure when nothing is sticky.

Where it stops holding

If a section already fits in the viewport, the header never leaves and sticking does nothing. A list with one group has no “current group” to report. A table that freezes column names is a different mechanism; a list sticky header cannot stand in for it. When a virtualised list recycles DOM, a sticky node that gets recycled will flash blank or the wrong section — the implementation dropped the location.

Applying it

• Pin the current section’s title at the top of the list’s scroll container; the next section’s title pushes it off.
• Sticky copy must be the section name, not the app name or the filter.
• Keep the height to one row; do not stuff filters into the sticky bar.
• How to check: flick to mid-list and immediately ask which group. If answering requires rolling back, the sticky header is not reporting place.

Related

• Within the group: E4.17.1 Section headers make the inner structure of a long list readable · E4.17.3 Too many, too fine groups raise scanning cost instead of lowering it · E4.17.4 A sticky element must not be mistaken for a tappable row
• Adjacent: E4.04 Sticky headers and horizontal scroll · E4.18 Virtualized long lists
• Search terms: sticky section header · current group · scroll position