Navigation

Affix

Pins an element to a fixed position on the page once the user scrolls past a threshold. Useful for sticky toolbars, back-to-top buttons, or action bars.

Installation

npx benflux-ui add affix

Usage

import { Affix } from "@benflux-ui/react"

// Pin to top when scrolled 64px
<Affix offsetTop={64}>
  <div>I become sticky</div>
</Affix>

// React to affixed state changes
<Affix offsetTop={80} onChange={(affixed) => console.log(affixed)}>
  <Button>Toolbar</Button>
</Affix>

// Pin to bottom of viewport
<Affix offsetBottom={16}>
  <Button>Back to top</Button>
</Affix>

Custom scroll target

Use the target prop to observe a scrollable container instead of the window.

const containerRef = useRef<HTMLDivElement>(null)

<div ref={containerRef} className="h-64 overflow-y-auto">
  <Affix offsetTop={0} target={() => containerRef.current!}>
    <div>Sticky inside this container</div>
  </Affix>
  {/* long content */}
</div>

Props

Prop	Type	Default	Description
offsetTop	number	0	Pixels from top of viewport to trigger sticky mode
offsetBottom	number	—	Pixels from bottom of viewport to trigger sticky mode. Overrides offsetTop.
target	() => HTMLElement \| Window	window	Scrollable container to observe
onChange	(affixed: boolean) => void	—	Called when the affix state changes
zIndex	number	100	z-index applied when element is affixed
children*	ReactNode	—	The element to affix