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

【问题标题】：How to create sticky headers on scroll with react如何使用反应在滚动上创建粘性标题
【发布时间】：2020-07-18 15:38:38
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs next.js react-sticky

【解决方案1】：

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

【讨论】：

好吧，让我试试看是否可以重新创建该库提供的那些粘性列表标题。如果您知道如何，请随时分享更多信息：)

【解决方案2】：

按照下面概述的步骤，在 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

【讨论】：

一个不错的。效果也很好！