Antd 固定页眉布局答案

【问题标题】：Antd Fixed Header In LayoutAntd 固定页眉布局
【发布时间】：2017-02-20 13:19:11
【问题描述】：

使用 ant.design，将Affix 应用于Header in a Layout 以使其在滚动期间保持固定在顶部的正确方法是什么？下面是一个示例布局：

import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;

ReactDOM.render(
<div>
  <Layout>
    <Header>Header</Header>
    <Layout>
      <Sider>Sider</Sider>
      <Content>Content</Content>
    </Layout>
    <Footer>Footer</Footer>
  </Layout>
</div>
, mountNode);

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

@benjycui 的 anwser 中的演示现已发布在 ant.design 网站：https://ant.design/components/layout/#components-layout-demo-fixed

【讨论】：

【解决方案2】：

你所需要的只是一些 CSS 来实现这一点

#header {
    position:fixed;
    width:100%;
    left:0;
    top:0;
    right: 0;
    z-index: 1000;
}

【讨论】：

【解决方案3】：

我知道我迟到了，但我发现自己处于同样的境地。正如cannin 在他的comment 中所说：

"...当有一个可切换的标题时，我希望的是一个固定的标题侧边栏”

我的解决方案是在Content 中嵌套一个新的Layout，将Sider 放在父布局中，将Header 放在子布局中，然后将已经指出的解决方案应用于孩子：https://ant.design/components/layout/#components-layout-demo-fixed

ReactDOM.render(
<div>
  <Layout>

    <Sider>Sider</Sider>  <- ***

    <Content>

      <Layout>
        <Header>Header</Header>  <- ***
        <Content>Content</Content>
      </Layout>

    </Content>

    <Footer>Footer</Footer>

  </Layout>
</div>
, mountNode);

另外，我必须使用position: sticky，而不是使用position: fixed，否则顶部栏的右侧会被禁止使用：

<Header style={{ position: 'sticky', zIndex: 1, width: '100%' }}>

【讨论】：

【解决方案4】：

您可以只为外部布局添加一个固定高度并设置可滚动内容，如下所示：

ReactDOM.render(
<div>
    <Layout style={{ height: '100vh' }}>
        <Header>Header</Header>
        <Layout>
            <Sider>Sider</Sider>
            <Content style={{ overflow: 'scroll' }}>Content</Content>
        </Layout>
        <Footer>Footer</Footer>
    </Layout>
</div>,
mountNode);

【讨论】：