как сделать sticky позиционирование в grid MUI?

Нужно две колонки и чтобы при пролистывании правая колонка была зафискирована на MUI

<Grid container spacing={2} sx={{ overflow: 'unset' }}>
  <Grid size={8}>
    <Stack spacing={2}>
      основной контент
    </Stack>
  </Grid>
  <Grid size={4}>
    <Box
      sx={{
        p: 3,
        borderRadius: 2,
        background: 'rgba(255,255,255,0.1)',
        position: 'sticky',
        top: 20,
      }}
    >
      <Typography variant="h6" sx={{ mb: 2 }}>
        Правая колонка (фиксируется)
      </Typography>
      <Typography>Эта колонка остаётся видимой при прокрутке левого контента.</Typography>
    </Box>
  </Grid>
</Grid>

Получается что элемент пролистывается вместе со всей страницей


Ответы (0 шт):