Affix

Fix the element to a specific visible area.

Basic Usage

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

:::demo You can set offset attribute to change the offset top，the default value is 0.

affix/basic

:::

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.

:::demo Please notice that the container avoid having scrollbar.

affix/target

:::

Fixed Position

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

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

affix/fixed

:::

API

Attributes

Name	Description	Type	Default
offset	offset distance	^[number]	0
position	position of affix	^[enum]'top' | 'bottom'	top
target	target container (CSS selector)	^[string]	—
z-index	z-index of affix	^[number]	100
teleported ^(2.13.0)	whether affix element is teleported, if true it will be teleported to where append-to sets	^[boolean]	false
append-to ^(2.13.0)	which element the affix element appends to	^[CSSSelector] / ^[HTMLElement]	body

Events

Name	Description	Type
change	triggers when fixed state changed	^[Function](fixed: boolean) => void
scroll	triggers when scrolling	^[Function](value: { scrollTop: number, fixed: boolean }) => void

Slots

Name	Description
default	customize default content

Exposes

Name	Description	Type
update	update affix state manually	^[Function]() => void
updateRoot	update rootRect info	^[Function]() => void