# 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 class="uiv" id="affix-example">
    <affix :offset="50">
      <alert>I'm using affix.</alert>
    </affix>
  </div>
</template>
<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.