---
title: Affix 固钉
---

# Affix 固钉

Fix the element to a specific visible area.

## Basic Usage

Affix is fixed at the top of the page by default.

:::example 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.

:::example Please notice that the container avoid having scrollbar.

affix/target

:::

## Fixed Position

The affix component provides two fixed positions: `top` and `bottom`.

:::example 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     |
| teleported ^(2.13.0) | whether affix element is teleported, if `true` it will be teleported to where `append-to` sets | ^[boolean]                      | false   |
| append-to ^(2.13.0)  | which element the affix element appends to                                                     | ^[CSSSelector] / ^[HTMLElement] | body    |

### 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` |