element-plus/docs/en-US/component/affix.md

title, lang

title	lang
Affix	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

:::

Attributes

Attribute	Description	Type	Accepted Values	Default
offset	offset distance	number	—	0
position	position of affix	string	top / bottom	top
target	target container (CSS selector)	string	—	—
z-index	z-index of affix	number	—	100

Events

Event Name	Description	Parameters
change	triggers when fixed state changed	(value: boolean)
scroll	triggers when scrolling	scroll top and fixed state

Methods

Method	Description	Parameters
update	update affix state manually	—

Slots

Name	Description
—	customize default content

<style lang="scss"> .example-showcase { .affix-container { text-align: center; height: 400px; border-radius: 4px; background: var(--el-color-primary-light-9); } } </style>