Skip to content

Skip to content

Sticky

View source on GitHub

See recent changes on GitHub

Sticky allows an element to become fixed when it reaches a threshold (top, left, bottom, or right).

Figma:

Responsive:

Adaptive:

Props

Component props
Name	Type	Default
`children` Required	`React.Node`	-
	The content to display.
`bottom`	`number \| string`	-
	Use numbers for pixels (`bottom={100}`) and strings for percentages (`bottom="100%"`)
`height`	`number`	-
	The height of the sticky container in pixels. This is useful when the sticky container and its content need to have different heights.
`left`	`number \| string`	-
	Use numbers for pixels (`left={100}`) and strings for percentages (`left="100%"`)
`right`	`number \| string`	-
	Use numbers for pixels (`right={100}`) and strings for percentages (`right="100%"`)
`top`	`number \| string`	-
	Use numbers for pixels (`top={100}`) and strings for percentages (`top="100%"`)
`zIndex`	`Indexable`	-
	An object representing the z-index of the sticky container. See the zIndex Classes page for more information.

Accessibility

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component responds to changing viewport sizes in web and mobile web.

Edit page on GitHub