n-affix

Name: n-affix
Availability: InStock
Author: jiaiyan

Pin content to fixed positions during scrolling with configurable trigger distances.

8|3|Updated Mar 13, 2026

Search Tags:#ui #vue #scroll #naive-ui #affix #sticky

Ready to run

npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-affix

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: n-affix
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-affix
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-affix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Affix helps keep content visible by sticking to top or bottom during scroll, enabling sticky UI elements.

Core Features & Use Cases

Top Affixing: Stick content to the top when scrolling past the trigger.
Bottom Affixing: Stick content to the bottom when scrolling past the trigger.
Custom Listen Target: Listen to a specific scrollable container.
Position Modes: Support both fixed and absolute positioning.
Trigger Points: Configurable top/bottom trigger distances.
Use Case: Keep a navigation bar or action panel always accessible while content scrolls.

Quick Start

Place an n-affix around the content you want to pin, and set top and trigger-top values to control when it becomes affixed.

Frequently Asked Questions about n-affix

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

FAQPage Schema

How do I pin a sticky header to the top during scroll in Vue?▼

To create a sticky header in Vue, pin content to fixed positions during scrolling to keep important UI visible. You can wrap your navigation bar in an affix component and configure top and bottom trigger distances to control when it becomes affixed.

What is the difference between fixed and absolute positioning for scroll affixing?▼

Scroll affixing supports both fixed and absolute positioning modes. Fixed positioning pins the element relative to the viewport, while absolute positioning pins it relative to a containing block, allowing flexible layout control within different scroll containers.

Can I affix a floating toolbar inside a specific scrollable container instead of the whole page?▼

Yes, you can affix a floating toolbar inside a specific scrollable container by setting a custom listen target. This directs the affix behavior to monitor scroll events within that particular element rather than the browser window.

How do I configure trigger distances for bottom affixing?▼

To configure bottom affixing, set the bottom and trigger-bottom values to determine the exact offset from the container's bottom edge. The content will stick to the bottom when the user scrolls past the specified trigger distance.

Does naive-ui work with custom scroll affix components?▼

Naive-ui works with custom scroll affix components by providing a compatible environment for sticky UI elements. The affix mechanism integrates with the framework to maintain persistent controls and floating toolbars during vertical scrolling.