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.
Choose the anchor side and adjust the offset to control when the element becomes fixed.
Scroll inside this box — the toolbar pins to its top and the badge reflects the OnChange state.
Pinned toolbar
Set Target to a CSS selector so the element affixes relative to a scroll container instead of the window. OnChange reports each transition between static and fixed.
API Reference
Affix
Related Components
- ScrollArea — Custom scrollable container for content areas
- Scrollspy — Scroll-aware navigation that tracks active sections