Scrollspy Rail, Pattern Paste

Canonical: https://patternpaste.com/interactive/scrollspy-rail/

Interactive (https://patternpaste.com/interactive/) Scrollspy Rail Needs plugin (https://patternpaste.com/docs/install-pattern-paste/)

# The Scrollspy Rail block

A native block section whose sticky index follows the reader through named content sections. Each top-level Group becomes a section, its first heading supplies the link label, and ordinary anchor links remain useful without JavaScript.

Subscribe (https://patternpaste.com/account/#plan)The 3 designs

Case scrollspy anatomy · Twenty Twenty-Five Plays best in its own window (https://patternpaste.com/previews/case-scrollspy-anatomy/twentytwentyfive.html)

Open in its own window (https://patternpaste.com/previews/case-scrollspy-anatomy/twentytwentyfive.html) Rendered by WordPress in Twenty Twenty-Five. Open this pattern (https://patternpaste.com/pattern/case-scrollspy-anatomy.html)

3 patterns 3 designs 7 settings patternpaste/scrollspy-rail 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.

## The designs

3 patterns, 3 designs between them. Each is this one block wrapped in core blocks, so everything around it takes its colours, spacing and type from your theme.

All 36 interactive patterns (https://patternpaste.com/interactive/#scrollspy-rail)

Shot in Twenty Twenty-Five Editorial Editorial Needs plugin

### 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.

7 blocks Open preview (https://patternpaste.com/pattern/case-scrollspy-anatomy.html)

Shot in Twenty Twenty-Five Single articles Single articles Needs plugin

### Handbook scrollspy directory

A reference directory: twelve entries in a narrow reading column beside a wide, unnumbered index of their titles that stays in view and marks the entry being read.

6 blocks Open preview (https://patternpaste.com/pattern/handbook-scrollspy-directory.html)

Shot in Twenty Twenty-Five Features Features Needs plugin

### Services scrollspy index

A text-led services section with a narrow numbered index beside five generous service chapters.

8 blocks Open preview (https://patternpaste.com/pattern/services-scrollspy-index.html)

## How it moves

A sticky contents rail for substantial pages, built from ordinary Group, Heading, Paragraph, Image and Table blocks. The first heading in each section names its anchor, so the editor stays recognisably WordPress and the saved content remains readable if the companion plugin is removed.

## What you can set before you copy

Every one of these is an attribute of the block, so it is the same control the editor's inspector offers after you have pasted. The Motion drawer on a pattern's own page writes your values into the markup before you copy it.

Setting | Attribute | Values | Default |

Track the current section | patternpasteMotion | On or off | On |

Number the sections | patternpasteNumbered | On or off | On |

Show reading progress | patternpasteProgress | On or off | On |

Reading line | patternpasteLine | 20 to 80%, in steps of 1 | 36% |

Index width | patternpasteRailWidth | 160 to 360px, in steps of 4 | 240px |

Index gap | patternpasteGap | 24 to 120px, in steps of 4 | 64px |

Sticky offset | patternpasteStick | 0 to 160px, in steps of 4 | 32px |

Back to the interactive patterns (https://patternpaste.com/interactive/)

## Needs the plugin

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.

The plugin is yours to use forever: after you cancel, it and every section using it keep working. Only updates and support stop.

How to install it (https://patternpaste.com/docs/install-pattern-paste/)

The plugin registers this block and nothing else: it ships no patterns of its own. The designs live here, as copy-paste markup.

### Before you paste

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.