El Affix

Affix Component

Affix component fixes an element to a specific visible area, useful for sticky navigation, headers, or toolbars.

When to Use

• Sticky navigation headers
• Fixed toolbars while scrolling
• Persistent action buttons
• Floating sidebars

Basic Usage

<template>
  <el-affix :offset="120">
    <el-button type="primary">Offset top 120px</el-button>
  </el-affix>
</template>

Target Container

<template>
  <div class="scroll-container" style="height: 400px; overflow: auto;">
    <el-affix target=".scroll-container" :offset="80">
      <el-button type="primary">Fixed in container</el-button>
    </el-affix>
  </div>
</template>

Fixed Position

<template>
  <el-affix position="top" :offset="20">
    <el-button type="primary">Fixed at top</el-button>
  </el-affix>
  
  <el-affix position="bottom" :offset="20">
    <el-button type="primary">Fixed at bottom</el-button>
  </el-affix>
</template>

API Reference

Attributes

Events

Slots

Exposes

Common Patterns

Sticky Header with State Tracking

<template>
  <el-affix :offset="0" @change="handleAffixChange">
    <header :class="{ 'is-fixed': isFixed }">
      <nav>Sticky Navigation</nav>
    </header>
  </el-affix>
</template>

<script setup>
import { ref } from 'vue'

const isFixed = ref(false)

const handleAffixChange = (fixed) => {
  isFixed.value = fixed
}
</script>

Best Practices

1. Use target to limit affix to a specific container
2. Set appropriate z-index to avoid layering issues
3. Handle change event for UI state updates