2021-10-22 19:32:39 +08:00
|
|
|
|
---
|
2021-10-25 15:21:08 +08:00
|
|
|
|
title: Affix
|
2021-10-22 19:32:39 +08:00
|
|
|
|
lang: en-US
|
|
|
|
|
|
---
|
|
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
|
# Affix
|
2021-01-14 17:02:47 +08:00
|
|
|
|
|
|
|
|
|
|
Fix the element to a specific visible area.
|
|
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
|
## Basic Usage
|
2021-01-14 17:02:47 +08:00
|
|
|
|
|
|
|
|
|
|
Affix is fixed at the top of the page by default.
|
|
|
|
|
|
|
2022-06-04 06:48:44 +08:00
|
|
|
|
:::demo You can set `offset` attribute to change the offset top，the default value is 0.
|
2021-09-04 19:29:28 +08:00
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
|
affix/basic
|
2021-09-04 19:29:28 +08:00
|
|
|
|
|
2021-01-14 17:02:47 +08:00
|
|
|
|
:::
|
|
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
|
## Target Container
|
2021-01-14 17:02:47 +08:00
|
|
|
|
|
|
|
|
|
|
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.
|
2021-09-04 19:29:28 +08:00
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
|
affix/target
|
2021-09-04 19:29:28 +08:00
|
|
|
|
|
2021-01-14 17:02:47 +08:00
|
|
|
|
:::
|
|
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
|
## Fixed Position
|
2021-01-14 17:02:47 +08:00
|
|
|
|
|
|
|
|
|
|
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`.
|
2021-09-04 19:29:28 +08:00
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
|
affix/fixed
|
2021-09-04 19:29:28 +08:00
|
|
|
|
|
2021-01-14 17:02:47 +08:00
|
|
|
|
:::
|
|
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
|
## Affix API
|
2021-09-04 19:29:28 +08:00
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
|
### Affix Attributes
|
2021-01-14 17:02:47 +08:00
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
|
| 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 |
|
2021-09-04 19:29:28 +08:00
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
|
### Affix Events
|
2021-07-22 08:30:17 +08:00
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
|
| Name | Description | Type |
|
|
|
|
|
|
| -------- | ---------------------------------- | -------------------------------------------------------- |
|
|
|
|
|
|
| `change` | triggers when fixed state changed. | `(fixed: boolean) => void` |
|
|
|
|
|
|
| `scroll` | triggers when scrolling. | `(value: { scrollTop: number, fixed: boolean }) => void` |
|
2021-09-04 19:29:28 +08:00
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
|
### Affix Exposes
|
2021-09-17 00:18:50 +08:00
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
|
| Method | Description | Type |
|
|
|
|
|
|
| -------- | --------------------------- | ------------ |
|
|
|
|
|
|
| `update` | update affix state manually | `() => void` |
|
2021-10-04 08:26:51 +08:00
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
|
### Affix Slots
|
|
|
|
|
|
|
|
|
|
|
|
| Name | Description |
|
|
|
|
|
|
| --------- | -------------------------- |
|
|
|
|
|
|
| `default` | customize default content. |
|
