skills.rest
wepn13232
wepn13232COMMUNITY
Explore all skills by this author →
GitHub

element-plus-affix

Provide Element Plus Affix API references for Vue developers.

7|Updated Mar 31, 2026
Search Tags:#frontend#api-reference#component-docs#element-plus#affix#el-affix#vue-layout
One-click install
npx skills add https://github.com/wepn13232/element-plus-skills --skill element-plus-affix
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: element-plus-affix
Source: https://github.com/wepn13232/element-plus-skills/tree/main/affix
Command: npx skills add https://github.com/wepn13232/element-plus-skills --skill element-plus-affix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Element Plus developers need immediate, centralized documentation for the Affix component instead of sifting through external sites, so this skill exports the key attribute, event, slot, and expose details right inside Claude Code.

Core Features & Use Cases

  • Attribute Reference: Lists offset, position, target, z-index, teleported, and append-to options with types and defaults so sticky behavior can be fine-tuned without leaving the chat.
  • Event/Slot/Expose Guidance: Covers change and scroll events, the default slot, and exposes like update and updateRoot to respond to position shifts and refresh state when necessary.
  • Use Case: When implementing a sticky header or sidebar, ask for el-affix parameters to quickly match offsets and scroll listeners to the design requirements.

Quick Start

Ask the skill how to configure el-affix with your desired offset and target before sculpting a sticky header.

Frequently Asked Questions about element-plus-affix

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure el-affix offset and target for a sticky header in Vue?▼

El-affix offset controls the distance from the viewport edge before sticking, while the target attribute defines which scrolling container triggers the affix behavior. Adjusting these attributes fine-tunes sticky header positioning within your Vue layout.

What events does Element Plus affix component expose for scroll position changes?▼

Element Plus affix exposes change and scroll events to respond to position shifts. The change event fires when the fixed state toggles, and scroll provides continuous tracking for dynamic layout updates.

How does the teleported attribute work with el-affix in Vue layout design?▼

The teleported attribute on el-affix determines whether the sticky element appends to the target container or stays in its original DOM position. Use append-to options to control rendering location and avoid z-index conflicts.

Can I use el-affix to pin a sidebar with a specific z-index in Element Plus?▼

Yes, el-affix supports a z-index attribute to control stacking order when pinning a sticky sidebar. Set the z-index value alongside offset and position attributes to ensure the sidebar stays above other layout elements.

Why does my Element Plus sticky component not trigger the change event on scroll?▼

If the el-affix change event does not trigger, verify that the target attribute correctly references your scrollable container and that the offset value matches your layout dimensions. Misconfigured target containers prevent scroll listeners from detecting position shifts.

Related Skills

Explore More Software Engineering Skills→
wepn13232wepn13232
7

element-plus-image

Document Element Plus el-image attributes, events, slots, and viewer controls.

Community
Basic
Aurora-AIAurora-AI
1

gsap-animation-master

Orchestrate GSAP timelines and ScrollTrigger animations with cleanup and performance practices.

Community
Advanced
wepn13232wepn13232
7

element-plus-container

Summarizes Elas Element Plus el-container attributes, slots, and usage scenarios for layout questions.

Community
Basic
yonetim258852yonetim258852

sticky-and-fixed-elements

Resolve sticky versus fixed positioning for persistent UI elements.

Community
Intermediate