Affix

Utility

Affix element to viewport with configurable offset and boundary constraints

Basic Usage

Scroll down to see the sticky button.

Variants

Sticky (CSS)
Scroll content...
Affix Bottom

Real World Example

Sticky Header
Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10

Usage Guidelines

When to Use

  • Sticky headers
  • Side navigation
  • Action buttons

Accessibility

  • Doesn't disrupt reading order
  • Position announced if dynamic

Performance

  • RAF-based scroll handling
  • Efficient boundary detection

Common Mistakes

  • Affix blocking content below
  • Not handling boundary correctly

Frequently Asked Questions

Affix keeps an element fixed on screen while scrolling within a boundary.
Yes, Affix supports top/bottom offset configuration.

View on GitHub

See the full source code on GitHub

Related Components

View all
Chart

Comprehensive charting system with 10 chart types (Line, Bar, Area, Pie, Radar, RadialBar, Scatter, Composed, Funnel, Treemap), responsive design, and data transformations

Collapsible

Animated collapsible content with controlled expansion, smooth transitions, and accessibility

Resizable

Resizable panel system with drag handles, min/max constraints, and layout persistence

ScrollArea

Custom scrollbar implementation with virtual scrolling, horizontal/vertical modes, and smooth scrolling

Previous

VideoPlayer

Next

Transfer