skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-affix

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
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-affix
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
LerianStudioLerianStudio
205

pre-dev-prd-creation

Generate a complete PRD with problem discovery, user stories, and success metrics.

Official
Basic
yyykkkunyyykkkun

gsap-scrolltrigger

Create scroll-linked web animations using GSAP's ScrollTrigger plugin.

Community
Intermediate
EmasoftEmasoft

amvcp-layout-chrome

Create persistent page chrome with sticky headers, toolbars, and scroll-spy TOC navigation.

Community
Advanced
ThejanaJayalathThejanaJayalath

frontend-slides

Generate viewport-optimized HTML presentations from content or PowerPoint files.

Community
Intermediate