Affix

The affix component toggles position: fixed on and off, emulating the effect found with position: 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:

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