# S05: Sticky Reading Header — UAT

**Milestone:** M016
**Written:** 2026-04-03T06:02:23.985Z

# S05 UAT: Sticky Reading Header

## Preconditions
- Chrysopedia frontend running (ub01:8096 or local dev server)
- At least one technique page with v2 body_sections_format and 4+ sections

## Test Cases

### TC1: Reading header appears on scroll
1. Navigate to a long technique page (e.g., `/techniques/bass-sound-design-copycatt`)
2. Verify the reading header is NOT visible at the top of the page
3. Scroll down past the article title (H1 element)
4. **Expected:** A thin bar slides in from the top showing the technique title
5. **Expected:** The bar shows a "·" separator and the current section name

### TC2: Section tracking updates on scroll
1. Continue scrolling through the technique page
2. Pass through different H2 section headings
3. **Expected:** The section name in the reading header updates to match the section currently in view
4. **Expected:** The ToC sidebar active item matches the reading header section

### TC3: Reading header hides on scroll up
1. Scroll back to the top of the page until the H1 title is visible
2. **Expected:** The reading header slides up and disappears (translateY -100%)
3. **Expected:** The hidden bar does not intercept clicks (pointer-events: none)

### TC4: Mobile behavior (375px)
1. Set viewport to 375px width
2. Scroll past the article title
3. **Expected:** Reading header appears with article title only — no section name
4. **Expected:** Title truncates with ellipsis if too long for the viewport

### TC5: V1 format pages excluded
1. Navigate to a technique page with v1 body_sections_format (if any exist)
2. Scroll past the title
3. **Expected:** No reading header appears — the component is not rendered

### TC6: z-index layering
1. On a technique page, scroll down to trigger the reading header
2. Open the mobile menu (hamburger, if on mobile viewport)
3. **Expected:** Mobile menu (z-index 200) renders above the reading header (z-index 150)
4. Open any dropdown/overlay (z-index 100)
5. **Expected:** Reading header renders above the overlay

### TC7: No reading header on pages without sections
1. Navigate to a technique page that has no body sections (empty sections array)
2. Scroll down
3. **Expected:** No reading header appears
