Affix
Pins content to a fixed position when scrolling past a threshold.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Affix />
When to Use
- Sticky elements that should remain visible as the user scrolls
- Pinned headers, toolbars, or navigation bars within scrollable content
- Fixed-position call-to-action buttons or summary panels
- Table of contents or sidebar navigation that stays in view
The Affix component wraps content and makes it stick when the user scrolls past it.
It uses ComponentInteropService to track scroll position.
Anchor
OffsetTop: 80 px
Scroll inside this box to see the chip stick.
Affixed — Top 80 px
Choose the anchor side and adjust the offset to control when the element becomes fixed.
API Reference
Affix
| Property | Type | Default | Description |
|---|---|---|---|
| OffsetTop | int | 0 | Pixels from top before becoming fixed. |
| OffsetBottom | int? | — | Pixels from bottom before becoming fixed. |
| Target | string? | — | CSS selector for scroll container. |
| OnChange | EventCallback<bool> | — | Fired when fixed state changes. |
Related Components
- ScrollArea — Custom scrollable container for content areas
- Scrollspy — Scroll-aware navigation that tracks active sections