Affix

Hace que un elemento se fije al viewport al desplazarse. Útil para navegación, barras de herramientas o botones de acción.

Importar

import { Affix } from 'asterui'

Ejemplos

Affix Básico

El elemento se fija cuando se desplaza más allá de su posición.

import { Affix, Button } from 'asterui'

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

export default App

Con Callback

Recibe notificaciones cuando cambia el estado del affix.

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 al Fondo

Fija el elemento al fondo del viewport.

import { Affix, Button } from 'asterui'

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

export default App

Objetivo Personalizado

Affix dentro de un contenedor desplazable.

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`

Propiedad	Descripción	Tipo	Predeterminado
`children`	Contenido para hacer fijo	`React.ReactNode`	-
`offsetTop`	Desplazamiento desde arriba cuando está fijo (píxeles)	`number`	-
`offsetBottom`	Desplazamiento desde abajo cuando está fijo (píxeles)	`number`	-
`target`	Elemento objetivo de desplazamiento	`() => HTMLElement \| Window`	-
`onChange`	Callback cuando cambia el estado del affix	`(affixed: boolean) => void`	-
`className`	Clases CSS adicionales	`string`	-

Accesibilidad

Usa CSS position: sticky para mejor rendimiento
No atrapa el foco del teclado cuando está fijado
El contenido permanece en el flujo del documento cuando no está fijado