滚动时在React Sticky中制作Material UI组件(不是AppBar) [英] Make a Material UI Component in React Sticky when scrolling (not AppBar)

问题描述

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

So I have AppBar working fine. And I didn't even use sticky for that but I think I need some kind of sticky style to make my element in the page essentially stick at the top when the user scrolls. I essentially want this.

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

但是在我的React页面中，我希望我的 ProgressBar 组件保留在顶部.该 RenderTeamSelections 下面的组件是一个大表，它将迅速将 ProgressBar 推出视线.我想在用户从表中进行选择时保持 ProgressBar 在视图中.这是相关的代码.

But within my React page I want my ProgressBar component to remain at the top. The component below this RenderTeamSelections which is a big table, it will push the ProgressBar out of view quickly. I want to kept the ProgressBar in view while the user makes selections from the table. Here is the relevant code.

 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文档.

I am familiar with the use of withStyles and have played with some settings on the position of ProgressBar like 'fixed', 'sticky' and '-webkit-sticky' but have not gotten it to stick at the top when I scroll yet. Any help would be greatly appreciated. I didn't see anything Material docs that seemed to directly relate to this scenario.

推荐答案

我能够使其与实质性的ui主题一起使用

I was able to get it working with material ui themes

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

here is my styles. I added a z-index because my table selects and table header data were still visible in <RenderTeamSelections {...this.props] /> in the sticky as I scrolled.

这是样式的最后一个组成部分.

Here is the final component with styles.

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);

这篇关于滚动时在React Sticky中制作Material UI组件(不是AppBar)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！