Skip to content

Affix NEW

Fix the element to a specific visible area.

Basic usage

Affix is fixed at the top of the page by default.

You can set offset attribute to change the offset top,the default value is 0.

Target Container

You can set target attribute to keep the affix in the container at all times. It will be hidden if out of range.

Please notice that the container avoid having scrollbar.

Fixed Position

The affix component provides two fixed positions: top and bottom.

You can set position attribute to change the fixed position, the default value is top.

Affix Props

NameTypeDefaultDescription
offsetnumber0Offset distance.
position'top' | 'bottom''top'Position of affix.
targetstring''Target container. (CSS selector)
z-indexnumber100z-index of affix

Affix Methods

NameParametersDescription
change(fixed: boolean) => voidTriggers when fixed state changed.
scroll(value: { scrollTop: number, fixed: boolean }) => voidTriggers when scrolling.

Affix Slots

NameParametersDescription
default()Customize default content.

Affix Exposes

NameParametersDescription
update() => voidUpdate affix state manually.
updateRoot() => voidUpdate rootRect info.

MIT Licensed