Question

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

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

我知道希望此按钮始终位于应用栏下方。因此，当用户向下滚动时，此按钮应像应用栏一样保持粘滞状态。我试图将定位设置为粘性，希望它可以堆叠在其下方，但不会。应用栏是动态的，因此我不知道它的确切高度，因为在不同的分辨率下，它看起来会有所不同，因此我无法使用固定位置之类的东西。

Answer 1

您可以将页面容器的位置设置为相对，将按钮设置为绝对。您可以将其对齐到页面右上角或任何需要的位置。

检查这个小提琴就是您所需要的

.componentparent {
  position: relative;
  height:100px;
  max-height: 50px;
  overflow: auto;
}

.button {
  position: fixed;
  top: 30px;
}

.otherelements{
  top: 70px;
  position: relative;
}

<div id="parent-container">
  <div> your app bar </div>
  <div class='componentparent'>
    <button class='button'>my button</button>
    <div class='otherelements'>your component</div>
  </div> 
</div>

Answer 2

将按钮放置在应用栏内，并将按钮设置为绝对位置，然后添加顶部：100％，将其精确地移动到应用栏底部。

在另一个“粘性”导航栏的正下方有一个“粘性”按钮

2 个答案: