Affix

Stick an element to the viewport.

When to use

On longer web pages, it's helpful to stick component into the viewport. This is common for menus and actions.

Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.

Notes for developers After version 5.10.0, we rewrite Affix use FC, some methods of obtaining ref and calling internal instance methods will be invalid.

Examples

Basic

The simplest usage.

Container to scroll.

Set a target for 'Affix', which is listen to scroll event of target element (default is window).

Callback

Callback with affixed state.

API

Affix are exported from @ceebee/ui/client.

Affix

Property	Description	Type	Default	Version
`offsetBottom`	Offset from the bottom of the viewport (in pixels)	`number`	`-`	—
`offsetTop`	Offset from the top of the viewport (in pixels)	`number`	`0`	—
`target`	Specifies the scrollable area DOM node	`() => Window \| HTMLElement \| null`	`() => window`	—
`onChange`	Callback for when Affix state is changed	`(affixed?: boolean) => void`	`-`	—