Affix

Fix the element to a specific visible area.

Basic Usage

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

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.

Fixed Position

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

Affix API

Affix Attributes

NameDescriptionTypeDefaultRequired
offsetoffset distance.number0No
positionposition of affix.'top' | 'bottom''top'No
targettarget container. (CSS selector)stringNo
z-indexz-index of affixnumber100No

Affix Events

NameDescriptionType
changetriggers when fixed state changed.(fixed: boolean) => void
scrolltriggers when scrolling.(value: { scrollTop: number, fixed: boolean }) => void

Affix Exposes

MethodDescriptionType
updateupdate affix state manually() => void

Affix Slots

NameDescription
defaultcustomize default content.

Source

ComponentDocs

Contributors