Affix
Overview
Affix applies position: sticky with configurable top/bottom offset using Paramanu spacing tokens. Useful for sticky headers, toolbars, table headers, and floating action buttons.
Usage
<div class="pm-affix pm-affix--top">Sticky header</div><div class="pm-affix pm-affix--bottom pm-affix--offset-4">Sticky footer with offset</div>import { Affix } from "@paramanu/utilities-react"
<Affix position="top">Sticky header</Affix><Affix position="bottom" offset="4">Sticky footer</Affix>Guidelines
- Use for elements that should remain visible during scrolling
- The offset maps to Paramanu spacing tokens (
--pm-spacing-*) - The element sticks within its parent’s scroll context
- Combine with
z-indexutilities if needed for stacking
API
| Prop | Type | Default | Description |
|---|---|---|---|
position | "top" | "bottom" | "top" | Which edge to stick to |
offset | SpacingScale | - | Distance from the sticky edge |