如何使用反应在滚动上创建粘性标题

Question

所以我有一些表格，我试图按日期分类，标题像（今天，昨天，上周，......），我试图根据视口中的当前表格使它们具有粘性。我尝试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

按照下面列出的步骤，在ReactJs上添加粘性标头，

header.js

const Header = () => {
    
        // Sticky Menu Area
        useEffect(() => {
            window.addEventListener('scroll', isSticky);
            return () => {
                window.removeEventListener('scroll', isSticky);
            };
        });
    
               
        /* Method that will fix header after a specific scrollable */
               const isSticky = (e) => {
                    const header = document.querySelector('.header-section');
                    const scrollTop = window.scrollY;
                    scrollTop >= 250 ? header.classList.add('is-sticky') : header.classList.remove('is-sticky');
                };
            return (
        <>
         <header className="header-section d-none d-xl-block">
              ..add header code
         </header>
        </>
      );   
   }

Header.css - 自定义样式（用于您的标题）

.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 2px 24px 0 rgb(0 0 0 / 15%);
    background-color: #ffffff !important;
    animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
    padding-top: 0px;
    padding-bottom: 0px;
}

笔记！

已通过链接编译： https ://codesandbox.io/s/sticky-header-dyews?file=/src/App.js

Answer 2

你可以只使用position: sticky与top: 0您的th。这是一个例子：https : //codepen.io/ipetriniith/pen/JjGeOKQ

Answer 3

在阅读了大量实现此目的的 js 代码后，我像这样实现了这一点......

.header {
    position: sticky;
    top: 0px;
    z-index: 1;
}