Sticky card doesn't sticky when I scroll / CSS

Question

I simply want to make sticky card but it does not stick when i scroll

<Box display={'flex'} width={'100%'} height={'150rem'}  >
  <Box width={'100%'}>
    {features.map((feature) => (
      <div key={feature.id}>
        <Typography variant='h2' py={10} color={'grey'}>
          {feature.title}
        </Typography>
      </div>
    ))}
  </Box>
  <Box position={'sticky'} width={'100%'} sx={{ backgroundColor: 'grey' }} top={0} height={'50rem'} alignSelf={'flex-start'} >
    sticky card placeholder
  </Box>
</Box>

You need to set a fixed height for the sticky card and use the `position: sticky;`. — Sally loves Lightning, Jul 22 '23 at 18:32
maybe look at this https://stackoverflow.com/questions/44446671/my-position-sticky-element-isnt-sticky-when-using-flexbox — brados, Jul 22 '23 at 18:39

score 1 · Answer 1 · answered Jul 22 '23 at 18:51

You need to get the sticky element out of the parent <box> since sticky elements only stick to it's parent, if you get that sticky element directtly into the <body> it will stick to the top of the page as you scroll.

 <Box display={'flex'} width={'100%'} position={'relative'} alignItems={'start'}>
  <Box width={'100%'}>
    {features.map((feature) => (
      <div key={feature.id}>
        <Typography variant='h2' py={10} color={'grey'}>
          {feature.title}
        </Typography>
      </div>
    ))}
  </Box>
</Box>
<Box display={'flex'} position={'sticky'} width={'100%'} top={0} height={'100vh'} alignItems={'center'}>
  <Box width={'100%'} height={'50%'} sx={{ backgroundColor: 'grey' }}>
    sticky card placeholder
  </Box>
</Box>

Sticky card doesn't sticky when I scroll / CSS

1 Answers1