Todos los componentes (204)

Pegado al desplazar

Navegación · Affix

Qué es y cuándo usarlo

Un bloque que se queda pegado al desplazar: el índice de una página larga, un resumen de compra, una barra de acciones.

Cuándo usarlo

Un índice o un resumen que tiene que seguir a la vista mientras se lee o se rellena un formulario largo.
offsetTop para dejarlo a una distancia del borde de arriba (debajo de una cabecera fija); offsetBottom para pegarlo abajo en vez de arriba.

Cuándo no

Una cabecera de toda la aplicación: es TopBar con sticky, o el AppShell, que la fija y deja la columna lateral debajo.

Cómo funciona: es position: sticky, no un bloque que se pasa a fixed con scripts. El navegador lo coloca solo, sin saltos ni hueco que rellenar, y vale con el desplazamiento táctil. A cambio, la regla de sticky: el contenedor tiene que ser más alto que el bloque, y ningún ancestro puede tener overflow: hidden ni auto.

Accesibilidad: no cambia el orden del documento ni el foco. onChange avisa de si está pegado ahora; se mide con un centinela y un IntersectionObserver, no escuchando scroll.

Aspecto fino: no tiene variables propias. Va en la capa 1 para quedar por encima del contenido que pasa por debajo; mientras está pegado lleva data-affixed, por si hace falta darle sombra o fondo desde fuera.

Cómo se ve

148,20 €

Envíos. Baja por esta caja: el resumen de la izquierda se queda a la vista mientras se leen las condiciones. Los pedidos salen en 24 horas laborables y se pueden devolver durante 30 días sin dar explicaciones.

Devoluciones. Baja por esta caja: el resumen de la izquierda se queda a la vista mientras se leen las condiciones. Los pedidos salen en 24 horas laborables y se pueden devolver durante 30 días sin dar explicaciones.

Garantía. Baja por esta caja: el resumen de la izquierda se queda a la vista mientras se leen las condiciones. Los pedidos salen en 24 horas laborables y se pueden devolver durante 30 días sin dar explicaciones.

Pagos. Baja por esta caja: el resumen de la izquierda se queda a la vista mientras se leen las condiciones. Los pedidos salen en 24 horas laborables y se pueden devolver durante 30 días sin dar explicaciones.

<Affix offsetTop={16}>
  <Card title="Tu pedido" subtitle="3 articulos">
    <Amount quantity={148.2} />
  </Card>
</Affix>

Props

Se importa con import { Affix } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`offsetBottom`	`number`	Si se pasa, se pega por ABAJO en vez de por arriba, a esta distancia del borde de abajo.
`offsetTop`	`number`	Distancia en pixeles al borde de ARRIBA de la ventana a la que se queda pegado. Por defecto, 0.
`onChange`	`(affixed: boolean) => void`	Avisa cuando empieza y cuando deja de estar pegado.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: