uivAffix
The affix component toggles
position: fixedon and off, emulating the effect found withposition: sticky.
TIP
You must provide CSS for the positioning and width of your affixed content.
WARNING
Do not use affix on an element contained in a relatively positioned element, such as a pulled or pushed column.
Example
Try to scroll the page down and see what's happening to the alert:
vue
<template>
<div id="affix-example">
<Affix :offset="50">
<Alert>I'm using affix.</Alert>
</Affix>
</div>
</template>
<script setup>
import { Affix, Alert } from 'uiv';
</script>
<style>
#affix-example .affix {
z-index: 999;
}
</style>API Reference
Affix
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
offset | Number | 0 | Pixels to offset from screen when calculating position of scroll. |
Slots
| Name | Description |
|---|---|
default | The affix body. |
Events
| Name | Description |
|---|---|
affix | This event fires immediately before the element has been affixed. |
affixed | This event is fired after the element has been affixed. |