时间戳

首页 > 解决方案 > MUI瀑布工具栏实现

javascript - MUI瀑布工具栏实现

问题描述

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

https://codesandbox.io/s/1op5mqq9oq

单击复选框并<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/似乎这是我不想做的完全不同的实现。

有没有人实施过这个？

标签： javascriptreactjsmaterial-designmaterial-ui

解决方案

Seems to me the CSS position: sticky is what you might be looking for

推荐阅读