element-plus/docs/en-US/component/affix.md
2022-03-24 15:35:15 +08:00

2.0 KiB
Raw Blame History

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 topthe 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. '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. (fixed: boolean) => void
scroll triggers when scrolling. (value: { scrollTop: number, fixed: boolean }) => void

Affix Exposes

Method Description Type
update update affix state manually () => void

Affix Slots

Name Description
default customize default content.