Antd 在布局中固定 Header

Question

对于 ant.design，应用 Affix to 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);

Answer 1

您只需要一些 CSS 即可实现此目的

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

Answer 2

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

Answer 3

我知道我迟到了，但我发现自己处于同样的境地。作为 cannin says in his ：

"...what I was hoping for was a fixed header when there is a toggleable sidebar"

我的解决方案是在 Content 中嵌套一个新的 Layout，将 Sider 放在 parent 布局中，将 Header 放在 child，然后应用到 child 已经指出的解决方案：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，否则顶部栏的右侧变为 off-limits:

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

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

Antd 在布局中固定 Header

Antd Fixed Header In Layout

javascript

reactjs

antd