mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
70 lines
2.1 KiB
Markdown
70 lines
2.1 KiB
Markdown
---
|
||
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
|
||
|
||
:::
|
||
|
||
## API
|
||
|
||
### Attributes
|
||
|
||
| Name | Description | Type | Default |
|
||
| -------- | ------------------------------- | -------------------------- | ------- |
|
||
| offset | offset distance | ^[number] | 0 |
|
||
| position | position of affix | ^[enum]`'top' \| 'bottom'` | top |
|
||
| target | target container (CSS selector) | ^[string] | — |
|
||
| z-index | `z-index` of affix | ^[number] | 100 |
|
||
|
||
### Events
|
||
|
||
| Name | Description | Type |
|
||
| ------ | --------------------------------- | ------------------------------------------------------------------- |
|
||
| change | triggers when fixed state changed | ^[Function]`(fixed: boolean) => void` |
|
||
| scroll | triggers when scrolling | ^[Function]`(value: { scrollTop: number, fixed: boolean }) => void` |
|
||
|
||
### Slots
|
||
|
||
| Name | Description |
|
||
| ------- | ------------------------- |
|
||
| default | customize default content |
|
||
|
||
### Exposes
|
||
|
||
| Name | Description | Type |
|
||
| ---------- | --------------------------- | ----------------------- |
|
||
| update | update affix state manually | ^[Function]`() => void` |
|
||
| updateRoot | update rootRect info | ^[Function]`() => void` |
|