Affix

The same scenarios, parameters and interactions as Cedar. Only component prefixes differ; themes and site shells remain independent.

Examples

Basic usage

Top offset

Bottom offset

Scroll container

Change event

Disabled, CSS mode and manual update

API

Props

Prop	Description	Type	Default
offset-top	Distance from the scroll container top; accepts CSS lengths	number / string	0
offset-bottom	Distance from the bottom; takes precedence over offset-top, including 0	number / string	undefined
target	Scroller or selector; finds nearest scrolling ancestor when omitted, falling back to window	string / HTMLElement / Window	undefined
target-container	Extra outer scroller to listen to; omitted means no extra listener, and it is not a clipping boundary	string / HTMLElement / Window	undefined
z-index	Stacking level	number / string	10
disabled	Disable affixing	boolean	false
css-mode	Use native position: sticky, subject to ancestor overflow and container boundaries	boolean	false

Events

Event	Arguments and timing
change	(fixed: boolean, offset: number), when fixed state changes; offset is the threshold while fixed, otherwise distance to the corresponding container edge; disabling reports 0

Slots

Slot	Description	Arguments
default	Content to affix	—

Methods

Method	Description	Arguments	Returns
updatePosition	Rebind scrollers and recalculate on the next animation frame	—	Promise<void>

Platform notes

Props, event arguments, slots and methods match. CSS mode follows browser sticky rules; paired demos use independent scroll containers.