时间戳

首页 > 解决方案 > 在另一个“粘性”导航栏下方有一个“粘性”按钮

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

问题描述

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

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 一样保持粘性。我试图将定位设置为粘性，希望它会堆叠在它下面，但它不会。应用栏是动态的，所以我不知道它的确切高度，因为在不同的分辨率下它看起来会有所不同，所以我不能使用固定定位之类的东西。

标签： cssreactjsmaterial-ui

解决方案

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

检查这个小提琴这是你需要的

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

推荐阅读