javascript - 如何使用 Material UI 在滚动时使 AppBar 和表格的标题粘在同一页面上(因此彼此堆叠)

Question

这是 AppBar 和 Table 的屏幕截图:

This is the screenshot at the top of the page.

This is the screenshot once you start scrolling down

这是 AppBar 和 Table 的代码:

 <AppBar position="static" style = {{background : "#00009A"}}>
          <Toolbar>
          <Link to="/view" className={classes.navLink} align = 'left'>
            <Box textAlign = "left" >
          <Typography variant="h6" flex={1} align = 'left'>
            APP TITLE
          </Typography>
          </Box>
          </Link>

          <Link to="/view" className={classes.navLink}>
            <Button color="inherit" align='left' }>Map Skills</Button>
          </Link>
</AppBar>

<Table stickyHeader aria-label="sticky table" style={{ marginTop: 20, marginBottom: 30 }}>
      <TableHead>
        <TableRow>
          {columns.map(column => (
            <TableCell
              key={column.id}
              align={column.align}
              style={{ width: column.minWidth, fontWeight: 500, fontSize: 17, backgroundColor: "#C1D8F7"}}
            >
              {column.label === "" ? props.heading : column.label}
            </TableCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>

我尝试使 AppBar 的“position = 'fixed'”，但向下滚动时它只是与表格的标题重叠。

我还尝试过使用 zIndex 将内容移到前面或后面。

我需要在滚动时将它们堆叠在一起，而不是重叠。 但我认为表头的粘性标题总是粘在页面顶部。

任何解决方案都会有很大帮助!谢谢!

Answer 1

将 AppBar 设置为 position="fixed"、表头 paddingTop: "68px"、表 stickyHeader，并删除任何 overflow: 'auto'。

<AppBar position="fixed" color="primary">
  <Toolbar>
  <IconButton color="secondary">
    <FilterListRounded />
  </IconButton>
  <Typography variant="h6">App Title</Typography>
  </Toolbar>
</AppBar>

...

const StyledTableCell = withStyles(() => ({
  head: {
    paddingTop: "68px",
  },
}))(TableCell);

...

<Table size="small" stickyHeader>
  <TableHead className={classes.head}>
    <TableRow>
      <StyledTableCell>Header 1</StyledTableCell>
      <StyledTableCell>Header 2</StyledTableCell>
      <StyledTableCell>Header 3</StyledTableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {props.results.map(row => {
      return(
        <TableRow key={row.id} hover>
          <TableCell>{row.one}</TableCell>
          <TableCell>{row.two}</TableCell>
          <TableCell>{row.three}</TableCell>
        </TableRow>
    )})}
  </TableBody>
</Table>