I'm having trouble creating a sticky card that remains in place when I scroll.
https://i.sstatic.net/wPZ6S.png
<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'} >
This is where the sticky card content would go
</Box>
</Box>