Sticky

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

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>
  )
}

Edit page on GitHub