Make a Material UI Component in React Sticky when scrolling (not AppBar)

I was able to get it working with material ui themes

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

On most components you can add {position: 'fixed'}. So try to use it in the component styling. if that doesn't work try to change the zIndex.

Example:

<Paper style={{position: 'fixed'}}>
   <List className={classes.list} component="nav" aria-label="main mailbox folders"
      subheader={<ListSubheader component="div" id="nested-list-subheader">Navigation</ListSubheader>}>
          <ListItem button>
             <ListItemIcon>
               <SubjectIcon/>
             </ListItemIcon>
             <ListItemText primary="Overview" />
          </ListItem>
  </List>