在另一个“粘性”导航栏下面有一个“粘性”按钮

我有一个应用程序文件,其中包含我自己的自定义appbar和不同的页面组件:

const styles = theme => ({
  appBar: {
          width:'100%',
  },
});

class App extends Component {

  render() {
    const {classes} = this.props;
    return (
      <React.Fragment>
      <CssBaseline />
      <AppBar position="sticky" className={classes.appBar} />
      <Page1 show={someCondition} />
      <Page2 show={someCondition} />
      .
      .
      <Page99 show={someCondition} />
     </React.Fragment>
    );
  }
}

Appbar是粘性的,所以它总是显示在顶部。 每个页面组件都有一个按钮,该按钮始终位于该页面的顶部:

const styles = theme => ({
      button: {
              width:'100%',
      },
    });

class Page99 extends Component {

  render() {
    const {classes} = this.props;
    return (
      <React.Fragment>
         <div>
            <Button variant="contained" className= {classes.button}>
              Action Button
            </Button>
         </div>
        {/* Some other stuff */>
     </React.Fragment>
    );
  }
}

我知道我希望这个按钮总是在应用程序栏的正下方。因此,当用户向下滚动时,这个按钮应该像appbar一样保持粘性。我试图将定位设置为Stick,希望它能堆叠在它下面,但它不会。appbar是动态的,所以我不知道它的确切高度,因为在不同的分辨率下,它看起来会不同,所以我不能使用固定定位之类的东西。