How do I install the El Affix skill?

Run npx skillmds@latest add jiaiyan/el-affix in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is El Affix safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with El Affix?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is El Affix free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published El Affix?

jiaiyan (@jiaiyan) published this skill. Their other Agent Skills are listed on their SkillMD profile.

El Affix by jiaiyan — Agent Skill

Name: El Affix
Rating: 4.2 (5 reviews)
Author: jiaiyan

File contents

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

Name	Description	Type	Default
offset	Offset distance	`number`	`0`
position	Position of affix	`'top' \| 'bottom'`	`'top'`
target	Target container (CSS selector)	`string`	—
z-index	z-index of affix	`number`	`100`
teleported	Whether affix element is teleported	`boolean`	`false`
append-to	Which element the affix appends to	`CSSSelector \| HTMLElement`	`'body'`

Events

Name	Description	Type
change	Triggers when fixed state changed	`(fixed: boolean) => void`
scroll	Triggers when scrolling	`({ scrollTop: number, fixed: boolean }) => void`

Slots

Name	Description
default	Customize default content

Exposes

Name	Description	Type
update	Update affix state manually	`() => void`
updateRoot	Update rootRect info	`() => void`

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

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

---name: el-affixdescription: Affix component for fixing elements to a specific visible area. Invoke when user needs to create sticky navigation, fixed headers, or elements that remain visible while scrolling.--- # 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 ```vue <template> <el-affix :offset="120"> <el-button type="primary">Offset top 120px</el-button> </el-affix> </template> ``` ## Target Container ```vue <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 ```vue <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 | Name | Description | Type | Default | |------|-------------|------|---------| | offset | Offset distance | `number` | `0` | | position | Position of affix | `'top' \| 'bottom'` | `'top'` | | target | Target container (CSS selector) | `string` | — | | z-index | z-index of affix | `number` | `100` | | teleported | Whether affix element is teleported | `boolean` | `false` | | append-to | Which element the affix appends to | `CSSSelector \| HTMLElement` | `'body'` | ### Events | Name | Description | Type | |------|-------------|------| | change | Triggers when fixed state changed | `(fixed: boolean) => void` | | scroll | Triggers when scrolling | `({ scrollTop: number, fixed: boolean }) => void` | ### Slots | Name | Description | |------|-------------| | default | Customize default content | ### Exposes | Name | Description | Type | |------|-------------|------| | update | Update affix state manually | `() => void` | | updateRoot | Update rootRect info | `() => void` | ## Common Patterns ### Sticky Header with State Tracking ```vue <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

Frequently asked questions

El Affix