Affix

Make an element stick to the viewport when scrolling. Useful for navigation, toolbars, or action buttons.

Import

import { Affix } from 'asterui'

Examples

Basic Affix

Element becomes fixed when scrolled past its position.

</>

Affixed Button

import { Affix, Button } from 'asterui'

function App() {
  return (
      <Affix offsetTop={80}>
        <Button color="primary">Affixed Button</Button>
      </Affix>
    )
}

export default App

With Callback

Get notified when affix state changes.

</>

Not Affixed

import { Affix, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [affixed, setAffixed] = useState(false)
  
  return (
      <Affix offsetTop={80} onChange={setAffixed}>
        <Button type={affixed ? 'primary' : 'neutral'}>
          {affixed ? 'Affixed!' : 'Not Affixed'}
        </Button>
      </Affix>
    )
}

export default App

Affix to Bottom

Fix element to bottom of viewport.

</>

Bottom Affixed

import { Affix, Button } from 'asterui'

function App() {
  return (
      <Affix offsetBottom={20}>
        <Button color="secondary">Bottom Affixed</Button>
      </Affix>
    )
}

export default App

Custom Target

Affix within a scrollable container.

</>

Sticky Header

import { Affix } from 'asterui'

function App() {
  return (
      <div id="scroll-container" className="h-64 overflow-auto">
        <Affix offsetTop={0} target={() => document.getElementById('scroll-container')!}>
          <div className="bg-primary text-primary-content p-2">
            Sticky Header
          </div>
        </Affix>
        {/* Scrollable content */}
      </div>
    )
}

export default App

API

Affix

Property	Description	Type	Default
children	Content to make sticky	React.ReactNode	-
offsetTop	Offset from top when fixed (pixels)	number	-
offsetBottom	Offset from bottom when fixed (pixels)	number	-
target	Scroll target element	() => HTMLElement | Window	-
onChange	Callback when affix state changes	(affixed: boolean) => void	-
className	Additional CSS classes	string	-

Accessibility

• Uses CSS position: sticky for better performance
• Does not trap keyboard focus when affixed
• Content remains in document flow when not affixed