# 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>
<style>
#affix-example .affix {
  z-index: 999;
}
</style>

# API Reference

# Affix (opens new window)

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

← Carousel ScrollSpy →