affix.md 2.0 KB
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. | '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. |