En-tête Fixe Antd En Disposition

Question

Avec ant.design, quelle est la bonne façon d'appliquer Affix à Header in a Layout pour qu'il reste fixe en haut pendant le défilement? Voici un exemple mise en page:

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

La démo en @ benjycui de anwser est maintenant publié sur le site ant.design: https://ant.design/components/layout/#components-layout-demo-fixed

Answer 2

Tout ce que vous avez besoin est un peu de CSS pour atteindre cet

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

Answer 3

Vous pouvez jeter un oeil à la démo officielle, voir: https://github.com/ant-design/ant-design/pull/5119