# Affix

Source: https://lumeo.nativ.sh/components/affix

# Affix

Pins content to a fixed position when scrolling past a threshold.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

Basic Affix

The Affix component wraps content and makes it stick when the user scrolls past it.

It uses `ComponentInteropService` to track scroll position.

Preview Code

Interactive: Anchor & Offset

Anchor

Top Bottom

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](/components/scroll-area) — Custom scrollable container for content areas
-   [Scrollspy](/components/scrollspy) — Scroll-aware navigation that tracks active sections