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" class="uiv">
    <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

NameTypeDefaultRequiredDescription
offsetNumber0Pixels to offset from screen when calculating position of scroll.

Slots

NameDescription
defaultThe affix body.

Events

NameDescription
affixThis event fires immediately before the element has been affixed.
affixedThis event is fired after the element has been affixed.