Question

我已经在REACT中创建了一个标头组件，并且该标头使用flexbox进行布局。现在，我需要将页眉贴上。我尝试使用position：fixed，但是弄乱了flexbox的样式。有人对我该如何解决有任何想法吗？

代码如下所示。标头的高度取决于是否显示移动菜单。

谢谢。

{
  "reported": {
    "value": 11,
    "sys": "sy1002",
    "ts": "2019-03-30T18:18:00.013Z"
  }
}

Answer 1

尝试添加一个容器来处理固定位置。

类似的东西：


this.fixedHeader = {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

const FixedHeader = (children) => {
    return <div style={this.fixedHeader}>{children}</div>
}


render() {
    if (this.state.windowWidth < 1000) {
        return <FixedHeader>{ this.renderMobileHeader() }</FixedHeader>
    }
    return <FixedHeader>{ this.renderWideHeader() }</FixedHeader>
}

如何使用Flexbox和REACT创建粘性标头

1 个答案: