Navigationduskmoonimplemented3 demos

Affix

Affix pins supporting actions or navigation to the viewport while the surrounding document continues to scroll.

Import@duskmoon-dev/components/affix

1API sections

5documented props

1behavior scenarios

Key API

offsetTopoffsetBottomtargetonChange

Usage

When to use

Use it when users need to move between sections, pages, steps, or contextual actions.
Expose current and disabled state so navigation remains clear to keyboard and screen-reader users.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Wayfinding

Covers the route, section, step, or action-list patterns that help users move through an interface.

Current state

Shows selected, active, open, or current props where the component exposes them.

Primary API surface

Affix is most often configured through `offsetTop`, `offsetBottom`, `target`, `onChange`.

Covered behavior

Renders children and toggles fixed state on target scroll

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Header

Content

Details

Sticky action

Scroll-bound content with a visible affixed action target.

Basic usage

authored

Import the component stylesheet and Affix from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Affix } from "@duskmoon-dev/components/affix";

export function Example() {
  return (<Affix
  onChange={(value) => console.log(value)}
>
  DuskMoon Affix
</Affix>);
}

Preview

Header

Content

Details

Sticky action

Scroll-bound content with a visible affixed action target.

Renders children and toggles fixed state on target scroll

test-backed

Affix scenario from the component test coverage: renders children and toggles fixed state on target scroll.

Source

import "@duskmoon-dev/components/styles.css";
import { Affix } from "@duskmoon-dev/components/affix";

export function AffixRendersChildrenAndTogglesDemo() {
  return (<Affix
  // Renders children and toggles fixed state on target scroll
  onChange={(value) => console.log(value)}
>
  DuskMoon Affix
</Affix>);
}

Preview

Header

Content

Details

Sticky action

Scroll-bound content with a visible affixed action target.

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Affix
  onChange={(value) => console.log(value)}
>
  DuskMoon Affix
</Affix>
</div>

<div data-theme="moonlight">
  <Affix
  onChange={(value) => console.log(value)}
>
  DuskMoon Affix
</Affix>
</div>

API

The API reference below lists every parsed exported type or interface for Affix. Start with `offsetTop`, `offsetBottom`, `target`, `onChange` for common usage.

Types: packages/components/src/components/affix/Affix.types.tsScenarios: packages/components/src/components/affix/Affix.test.tsx

AffixPropsinterface extends Omit< ComponentProps<"div">, "children" | "onChange" >

Prop	Type	Required	Description
`offsetTop`	`number`	No	offsetTop configures Affix.
`offsetBottom`	`number`	No	offsetBottom configures Affix.
`target`	`() => Window \| HTMLElement \| null`	No	target configures Affix.
`onChange`	`(affixed?: boolean) => void`	No	onChange configures Affix.
`children`	`ReactNode`	No	children configures Affix.