Sticky

View source on GitHub

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

Figma:

N/A

Web:

iOS:

Android:

A11y:

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.

Accessibility

Ready

Example

Sticky top

This should stick

Scroll

Keep scrolling

Scroll more

This should also stick

Still scrolling

Tadaaaaa

function Example() {
  const BOX_ZINDEX = new FixedZIndex(1);
  const STICKY_ZINDEX = new CompositeZIndex([BOX_ZINDEX]);

  return (
    <Box color="white" height={200} overflow="scroll" tabIndex={0}>
      <Box height={500} marginTop={10}>
        <Box>
          <Sticky top={0}>
            <Box
              alignItems="center"
              color="lightGray"
              display="flex"
              height={40}>
                <Text>This should stick</Text>
            </Box>
          </Sticky>
          <Box marginTop={10} position="relative">
            <Text>Scroll</Text>
            <Text>Keep scrolling</Text>
            <Text>Scroll more</Text>
          </Box>
        </Box>
        <Box>
          <Sticky top={0} zIndex={STICKY_ZINDEX}>
            <Box
              alignItems="center"
              color="lightGray"
              display="flex"
              height={40}
              position="relative"
              zIndex={BOX_ZINDEX}>
                <Text>This should also stick</Text>
            </Box>
          </Sticky>
          <Box marginTop={10}>
            <Text>Still scrolling</Text>
            <Text>Tadaaaaa</Text>
          </Box>
        </Box>
      </Box>
    </Box>
  )
}

function Example() {
  const BOX_ZINDEX = new FixedZIndex(1);
  const STICKY_ZINDEX = new CompositeZIndex([BOX_ZINDEX]);

  return (
    <Box color="white" height={200} overflow="scroll" tabIndex={0}>
      <Box height={500} marginTop={10}>
        <Box>
          <Sticky top={0}>
            <Box
              alignItems="center"
              color="lightGray"
              display="flex"
              height={40}>
                <Text>This should stick</Text>
            </Box>
          </Sticky>
          <Box marginTop={10} position="relative">
            <Text>Scroll</Text>
            <Text>Keep scrolling</Text>
            <Text>Scroll more</Text>
          </Box>
        </Box>
        <Box>
          <Sticky top={0} zIndex={STICKY_ZINDEX}>
            <Box
              alignItems="center"
              color="lightGray"
              display="flex"
              height={40}
              position="relative"
              zIndex={BOX_ZINDEX}>
                <Text>This should also stick</Text>
            </Box>
          </Sticky>
          <Box marginTop={10}>
            <Text>Still scrolling</Text>
            <Text>Tadaaaaa</Text>
          </Box>
        </Box>
      </Box>
    </Box>
  )
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Edit page on GitHub