All components (204)

Affix

Navigation · Affix

What it is and when to use it

A block that stays stuck while scrolling: the index of a long page, an order summary, an action bar.

When to use it

An index or a summary that has to stay in view while reading or filling in a long form.
offsetTop to leave it at a distance from the top edge (below a fixed header); offsetBottom to stick it to the bottom instead of the top.

When not to

An application-wide header: that is TopBar with sticky, or AppShell, which pins it and leaves the side column below.

How it works: it is position: sticky, not a block that switches to fixed with scripts. The browser positions it on its own, with no jumps and no gap to fill, and it works with touch scrolling. In exchange, the rule of sticky applies: the container has to be taller than the block, and no ancestor can have overflow: hidden or auto.

Accessibility: it does not change the document order or the focus. onChange reports whether it is stuck right now; this is measured with a sentinel and an IntersectionObserver, not by listening to scroll.

Fine-tuning: it has no variables of its own. It sits on layer 1 so it stays above the content passing underneath; while stuck it carries data-affixed, in case you need to give it a shadow or background from outside.

What it looks like

€148.20

Shipments. Scroll this box: the summary on the left stays in view while the terms are read. Orders ship within 24 business hours and can be returned within 30 days, no questions asked.

Returns. Scroll this box: the summary on the left stays in view while the terms are read. Orders ship within 24 business hours and can be returned within 30 days, no questions asked.

Warranty. Scroll this box: the summary on the left stays in view while the terms are read. Orders ship within 24 business hours and can be returned within 30 days, no questions asked.

Payments. Scroll this box: the summary on the left stays in view while the terms are read. Orders ship within 24 business hours and can be returned within 30 days, no questions asked.

<Affix offsetTop={16}>
  <Card title="Your order" subtitle="3 items">
    <Amount quantity={148.2} />
  </Card>
</Affix>

Props

Import it with import { Affix } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`offsetBottom`	`number`	If set, it sticks to the BOTTOM instead of the top, at this distance from the bottom edge.
`offsetTop`	`number`	Distance in pixels to the TOP edge of the window at which it sticks. By default, 0.
`onChange`	`(affixed: boolean) => void`	Notifies when it becomes stuck and when it stops being stuck.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: