z_element_plus/docs/en-US/component/affix.md

---

title: Affix

lang: en-US

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

:::

Affix API

Affix Attributes

Name	Description	Type	Default	Required
offset	offset distance.	^[number]	0	No
position	position of affix.	^[enum]'top' \| 'bottom'	'top'	No
target	target container. (CSS selector)	^[string]	—	No
z-index	z-index of affix	^[number]	100	No

Affix 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

Affix Exposes

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

Affix Slots

Name	Description
default	customize default content.