Antd Fixed Header In Layout

Question

With ant.design, what is the right way to apply Affix to Header in a Layout so that it stays fixed at the top during scroll? Below is an example 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

The demo in @benjycui's anwser is published at ant.design site now: https://ant.design/components/layout/#components-layout-demo-fixed