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

Props

Component props
Name
Type
Default
bottom
number | string
-

Use numbers for pixels: bottom={100} and strings for percentages: width="100%"

children
React.Node
-
height
number
-

Use numbers for pixels: height={100}. This is only 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
interface Indexable { index(): number; }
-

An object representing the zIndex value of the Sticky.

Example: Sticky top