synthetic

Affix

Pins its children in place once the page scrolls past them, and releases them on the way back.

Task listScroll the page: the Add task bar pins under the site header

Harbour rebrand, 7 tasks

Draft launch checklist

Research

Book crew interviews

Ops

Icon audit

Design

Offline sync for tasks

Eng

Harbour homepage

Design

Brand palette

Design

Rota export

Ops

Draft launch checklist

Research

Book crew interviews

Ops

Icon audit

Design

Offline sync for tasks

Eng

Harbour homepage

Design

Brand palette

Design

Rota export

Ops

Pinned look

Pinned

In context

Projects overviewA pinned status strip above a long list

5 projects, 1 late, launch on 24 Oct

Harbour rebrand

Identity, site and launch kit for the harbour trust.

On track

Tideline mobile

Offline tasks and a quiet inbox for the crew.

Review

Crew interviews

Twelve calls, one clear pattern.

Late

Rota export

Shifts out to payroll without the spreadsheet.

Done

Depot signage

Wayfinding for the three northern depots.

Review

Props

Prop	Type	Required	Default
`offsetTop`	`number \| undefined`	No	0
`onAffixChange`	`((affixed: boolean) => void) \| undefined`	No	—
`className`	`string \| undefined`	No	—

Behaviour

A same-sized placeholder keeps the layout from jumping when the content pins. Measurement is rAF-throttled. It listens to the real window scroll, not a scrollable container, so scroll this page to see it pin and un-pin.

data-rebar-* attributes

data-rebar-component="affix" on the root; the pinned content and its placeholder each carry their own data-rebar-part.

Migrating to Ant Design

AntD's Affix is a close direct equivalent: offsetTop maps across, onAffixChange is onChange.