A sticky element must not be mistaken for a tappable row

What it is

A sticky section header sits at the top of the list while items slide under it. If its height, type size, and fill are close to a record row, a stopped scroll makes people tap it as the first item in view. Sticky chrome versus row requires that this pinned bar read as structure, not as a record, at every scroll position. If a tap opens an item, the structure control has stolen a content action.

Why it happens

A list trains “visible rows are tappable.” The sticky bar occupies the visual slot of the first row, and the habit covers it. At rest, position still helps (“that is the title at the top”); the instant scroll stops, the sticky bar and the first item align as two similar blocks and discrimination gets harder. If shadow or fill is weak, the sticky bar also looks like a translucent copy sitting on the first item. Two failures follow a tap: nothing happens (the list seems broken), or the wrong record opens (hit testing landed on the row sliding underneath). Both come from the same fact: the pinned bar never left the perceptual class of items. A tappable sticky (jump to the start of the group) must look like a button, not imply tappability by “it looks like a row.”

Studying it

While the sticky header is showing, ask people to tap “the first item.” Record taps on the sticky bar, what they expected, and what actually fired. Independent variables: visual difference from items (height, fill, weight), whether the sticky is tappable, whether the row beneath can still be hit. Dependent variables: sticky-as-item errors, punch-through to the row below. Small difference plus a still-hittable lower row should produce the most punch-through.

Where it stops holding

If the sticky bar is clearly a filter chip or a toolbar, people may have meant to tap it; that is a different control and should wear toolbar clothes, not list-row clothes. A frozen table header has its own column-name percept, and tapping it is usually sort — not the same misread as a list section sticky. In accessibility focus order, a sticky inserted between every item makes keyboard users pass the same title again and again; keep it as a read-only landmark during scroll, or as a single group-header control.

Applying it

• Give the sticky bar a clearly different height, fill, and weight from items, plus a bottom edge that does not move with rows.
• Default to not tappable. If jumping to the group start is required, make a real button whose hit region does not include sliding rows.
• Forbid punch-through: a tap inside the sticky rectangle must not activate the row underneath.
• How to check: after a stop, ask someone to “open the first item.” Pointing at the sticky bar, or opening the wrong row, means structure is still in the content class.

Related

• Within the group: E4.17.1 Section headers make the inner structure of a long list readable · E4.17.2 A sticky header names the group you are in while you scroll · E4.17.3 Too many, too fine groups raise scanning cost instead of lowering it
• Adjacent: E4.02 List items · E4.04 Sticky headers and horizontal scroll
• Search terms: sticky header · hit testing · chrome versus content