# Case scrollspy anatomy

> A case study told as a photo essay: a compact masthead, then four sections that each open on a large captioned photograph and several paragraphs of story, ending in a results ledger. Needs the companion plugin, which comes with your access; without it, or without motion, the masthead is followed by the four photo sections as a plain stack. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/case-scrollspy-anatomy.html
Section: Editorial
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 6.7 to 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Also needs: Install the Pattern Paste plugin first, then paste. This section embeds one of its blocks: the plugin comes with your access, downloads from your account, and takes a minute. Paste without it and the section arrives as a plain stack of your headings, text and images, with none of the motion.
Blocks: column, columns, group, heading, image, paragraph, patternpaste/scrollspy-rail
Keywords: case study, scrollspy, results, process, photo essay

Promise: This variation embeds one of our blocks: install the companion plugin, then paste.

---

## The signature moment: A photo essay where every chapter opens on a full-column photograph and the rail carries the reader to a results ledger

A photo essay: each of the four sections opens on a large captioned photograph at one 16:9 crop, then several paragraphs of story, so the pictures open each chapter and the narrow rail keeps the reader's place through the long read between them. The story ends in a results ledger rather than another chapter.

## Why this is not services-scrollspy-index or handbook-scrollspy-directory

Services scrollspy index is text-led: five long service chapters with a numbered rail, where the column of prose does the explaining. Handbook scrollspy directory is a directory, ten to twelve look-up entries where the rail is the thing you scan. This one is image-led: four sections, each a picture first, a caption and a few paragraphs, with an unnumbered rail because four chapters need names, not an index. It is the only one whose resting picture is a photograph.

## What it inherits from your theme

Every font and colour comes from the theme. Body text and captions need 4.5:1 contrast; the masthead heading and the ledger figures need 3:1.

## What it decides for itself

It decides a padded full-width Group with a 1200px content ceiling, a compact masthead above the block so the first photograph shows at rest, a 176px unnumbered rail with a 40px gap, one 16:9 crop for all four photographs, and a three-column results ledger closing the last section. Section titles are on the theme's `large` rung and the ledger figures on `x-large`: hierarchy, not display.

## What needs the plugin

The plugin draws the rail and marks Brief, Approach, System or Result as the reader reaches it. Without it, the masthead is followed by the four photo sections as a plain stack; with reduced motion the rail stays and anchor links jump instantly.

## What you change first

1. The four photographs: select each and choose Replace; the 16:9 crop and cover setting stay. Rewrite the alt text and the caption for each.
2. Rewrite the four named Section groups; each Heading names its rail link.
3. Replace the ledger figures with measured results.
4. Keep the section titles at h3 below the h2 masthead, or adjust the hierarchy for the page they sit on.