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.
|
|
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
|
## Basic usage
|
2021-01-14 17:02:47 +08:00
|
|
|
|
|
|
|
|
|
|
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。
|
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
|
|
|
|
:::
|
|
|
|
|
|
|
2021-09-17 00:18:50 +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
|
|
|
|
:::
|
|
|
|
|
|
|
2021-09-17 00:18:50 +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
|
|
|
|
:::
|
|
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
|
## Attributes
|
2021-09-04 19:29:28 +08:00
|
|
|
|
|
|
|
|
|
|
| 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 |
|
2021-01-14 17:02:47 +08:00
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
|
## Events
|
2021-09-04 19:29:28 +08:00
|
|
|
|
|
|
|
|
|
|
| Event Name | Description | Parameters |
|
|
|
|
|
|
| ---------- | --------------------------------- | -------------------------- |
|
|
|
|
|
|
| change | triggers when fixed state changed | (value: boolean) |
|
|
|
|
|
|
| scroll | triggers when scrolling | scroll top and fixed state |
|
2021-07-22 08:30:17 +08:00
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
|
## Methods
|
2021-09-04 19:29:28 +08:00
|
|
|
|
|
|
|
|
|
|
| Method | Description | Parameters |
|
|
|
|
|
|
| ------ | --------------------------- | ---------- |
|
|
|
|
|
|
| update | update affix state manually | — |
|
2021-09-17 00:18:50 +08:00
|
|
|
|
|
2021-10-04 08:26:51 +08:00
|
|
|
|
## Slots
|
|
|
|
|
|
|
|
|
|
|
|
| Name | Description |
|
|
|
|
|
|
| ---- | ------------------------- |
|
|
|
|
|
|
| — | customize default content |
|
