Preview Updated 2026-05-10

Affix

Switch an element to fixed positioning when it scrolls past — handy for sticky toolbars, anchors, or submit bars.

Basic usage

offsetTop sets the pixel offset from the container top once pinned; offsetBottom does the opposite. target specifies the scroll container; omit it to listen on window.

前置文字 1

前置文字 2

前置文字 3

前置文字 4

前置文字 5

前置文字 6

后置文字 1

后置文字 2

后置文字 3

后置文字 4

后置文字 5

后置文字 6

后置文字 7

后置文字 8

后置文字 9

后置文字 10

后置文字 11

后置文字 12

后置文字 13

后置文字 14

后置文字 15

后置文字 16

后置文字 17

后置文字 18

后置文字 19

后置文字 20

后置文字 21

后置文字 22

后置文字 23

后置文字 24

后置文字 25

后置文字 26

后置文字 27

后置文字 28

后置文字 29

后置文字 30

<div class="scroll-root" style="height: 400px; overflow-y: auto;">
<CfAffix :offset-top="0" target=".scroll-root">
  <div class="toolbar">This row sticks once it reaches the top</div>
</CfAffix>
</div>

<div className="scroll-root" style={{ height: 400, overflowY: 'auto' }}>
<CfAffix offsetTop={0} target=".scroll-root">
  <div className="toolbar">This row sticks once it reaches the top</div>
</CfAffix>
</div>

API

Prop	Type	Default	Description
`offsetTop`	`number`	`—`	Pixel offset from the container top when pinned
`offsetBottom`	`number`	`—`	Pixel offset from the container bottom when pinned; mutually exclusive with `offsetTop`
`target`	`string`	`—`	Scroll container selector; omit to listen on `window`
`zIndex`	`number`	`100`	Stacking level once pinned