javascript - 如何使用 react 在滚动上创建粘性标题

Question

所以我有表格，我试图按日期分类，标题如(今天，昨天，上周，......)，我试图根据视口(viewport)中的当前表格使它们变得粘滞。我尝试使用 react-sticky图书馆专门the stacked example因为这似乎是我正在寻找的效果，但我无法重新创建它。
拜托，我是否遗漏了一些关于图书馆使用的东西。
也非常欢迎没有图书馆的解决方案
我一直在尝试的

export default function CustomizedTables() {
    const classes = useStyles();

    return (<StickyContainer>
                <Sticky topOffset={20}>
                    {(props) => (<div className={reduceCSS.tableHistoryTitle_day}>Today</div>)}
                </Sticky>
                <TableContainer component={Paper} elevation={0}>
                
                    <Table className={classes.table} aria-label="customized table">
                        
                        
                        <TableBody>
                            {rows.map((row) => (
                                <StyledTableRow key={row.name} elevation={0}>
                                    
                                    <StyledTableCell align="left" className={classes.iconCell}><AssignmentReturnedSharpIcon className={classes.inputIcon} /></StyledTableCell>
                                    <StyledTableCell align="left">{row.calories}</StyledTableCell>
                                    <StyledTableCell component="th" scope="row">
                                        {row.name}
                                    </StyledTableCell>
                                    <StyledTableCell align="right">{row.fat}</StyledTableCell>
                                    <StyledTableCell align="right">{row.carbs}</StyledTableCell>
                                    <StyledTableCell align="right">{row.protein}</StyledTableCell>
                                </StyledTableRow>
                            ))}
                        </TableBody>
                    </Table>
                </TableContainer>
    </StickyContainer>
    );
}

Answer 1

您可以使用 position: sticky和 top: 0在您的 th .这是一个例子:
https://codepen.io/ipetriniith/pen/JjGeOKQ