MUI瀑布工具栏实现答案

【问题标题】：MUI Waterfall toolbar implementationMUI瀑布工具栏实现
【发布时间】：2019-08-02 01:52:20
【问题描述】：

我正在使用与此非常相似的东西：

点击复选框，<Toolbar /> 出现，当您向下滚动页面时，<Toolbar /> 保持在顶部并且看不见。我假设它可以是开箱即用的“瀑布”工具栏，我可能错了，但假设它是可以应用的类或道具。下面是演示代码：

我最终希望工具栏在滚动时保持在浏览器的顶部，然后在返回顶部时将自身固定回原位。

<Toolbar
      className={classNames(classes.root, {
        [classes.highlight]: numSelected > 0,
      })}
    >
      <div className={classes.title}>
        {numSelected > 0 ? (
          <Typography color="inherit" variant="subtitle1">
            {numSelected} selected
          </Typography>
        ) : (
          <Typography variant="h6" id="tableTitle">
            Nutrition
          </Typography>
        )}
      </div>
      <div className={classes.spacer} />
      <div className={classes.actions}>
        {numSelected > 0 ? (
          <Tooltip title="Delete">
            <IconButton aria-label="Delete">
              <DeleteIcon />
            </IconButton>
          </Tooltip>
        ) : (
          <Tooltip title="Filter list">
            <IconButton aria-label="Filter list">
              <FilterListIcon />
            </IconButton>
          </Tooltip>
        )}
      </div>
    </Toolbar>

Material Design 上有一个瀑布工具栏的链接 - https://material.io/develop/web/components/toolbar/ 似乎这是一个完全不同的实现，我不想这样做。

有人实现了吗？

【问题讨论】：

标签： javascript reactjs material-design material-ui

【解决方案1】：

在我看来，CSS position: sticky 是您可能正在寻找的东西

【讨论】：