javascript - Antd 固定页眉布局

Question

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

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

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

Answer 2

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

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

Answer 3

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

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

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

ReactDOM.render(
<div>
  <Layout>

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

    <Content>

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

    </Content>

    <Footer>Footer</Footer>

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

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

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