css - 滚动时在 React Sticky 中制作一个 Material UI 组件(不是 AppBar)

Question

所以我的 AppBar 工作正常。我什至没有为此使用粘性，但我认为我需要某种粘性样式来使我在页面中的元素在用户滚动时基本上粘在顶部。我基本上想要这个。

https://www.w3schools.com/howto/howto_css_sticky_element.asp

但是在我的 React 页面中，我希望我的 ProgressBar 组件保持在顶部。 RenderTeamSelections 下面的组件是一个大表格，它会快速将 ProgressBar 推出 View 。当用户从表中进行选择时，我想将 ProgressBar 保持在 View 中。这是相关代码。

 return (

      <div className={rootClassName}>
        <div className="g-row">
          <div className="g-col">
            <AccountProfile {...this.props} />
            <br />
            <Team team={this.props.team} profileDetail={profileDetail} />
            <br />
            <ProgressBar {...this.props} />
            <br />
            <RenderTeamSelections {...this.props] />
          </div>
        </div>
      </div>

    );

我熟悉 withStyles 的使用，并且在 ProgressBar 的位置上玩过一些设置，比如 'fixed'、'sticky' 和 '-webkit-sticky' 但还没有得到它当我滚动时坚持在顶部。任何帮助将不胜感激。我没有看到任何似乎与此场景直接相关的 Material 文档。

Answer 1

我能够让它与 material ui 主题一起工作

这是我的风格。我添加了一个 z-index，因为我的表选择和表头数据在 <RenderTeamSelections {...this.props] /> 中仍然可见。在我滚动时的粘滞中。

这是带有样式的最终组件。

const styles = theme => ({
    root: {
        background: 'white',
        position: '-webkit-sticky',
        position: 'sticky',
        top: 20,
        bottom: 20, 
        paddingTop: '40px',
        paddingBottom: '40px',
        zIndex: 5,
    },
    details: {
        display: 'flex'
    },
    progressWrapper: {
        marginTop: theme.spacing(2)
    },
    linearProgress: {
        height: 20
    },
});


export function ProgressBar(props) {
    const { profileDetail, classes } = props;
    const [completeness, setCompleteness] = useState(0)

    useEffect(() => {
        if (profileDetail) {
            setCompleteness(profileDetail.teamKeysTier1.split(",").filter(x => { return x.length != 0 }).length + profileDetail.teamKeysTier2.split(",").filter(x => { return x.length != 0 }).length)
        }
    }, [profileDetail])

    return (
        <Portlet className={classes.root} >
            <PortletContent >
                {completeness > 8 ?
                    <div className={classes.progressWrapper}>
                        <Typography variant="h3" color="textSecondary">Team Selection Completeness: {completeness * 10 + 10}%</Typography>
                        <br /> 
                        <br />
                        <LinearProgress
                            className={classes.linearProgress}
                            value={completeness * 10 + 10}
                            variant="determinate"
                            position="fixed"
                        /> </div> :
                    <div className={classes.progressWrapper}>
                        <Typography variant="h3" color="textSecondary">Team Selection Completeness: {completeness * 10}%</Typography>
                        <br /> 
                        <br />
                        <LinearProgress
                            className={classes.linearProgress}
                            value={completeness * 10}
                            variant="determinate"
                            position="fixed"
                        />
                    </div>}
            </PortletContent>
        </Portlet>

    )

}

export default withStyles(styles)(ProgressBar);