Question

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

单击复选框，然后会显示<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>

在材料设计上有指向瀑布工具栏的链接-https://material.io/develop/web/components/toolbar/似乎是我不想做的完全不同的实现。

有人实施过吗？

Answer 1

在我看来，CSS position: sticky是您所需要的

MUI Waterfall工具栏实现

1 个答案: