Antd Fixed Header In Layout

javascript reactjs antd
cannin picture cannin · Feb 20, 2017 · Viewed 15.3k times · Source

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

afc163 picture afc163 · Mar 20, 2017

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

Related questions

How to customize Ant.design styles

Who knows how to customize Ant.design styles in proper way? For example, I want to change the default backgroundColor and height of Header section: import React, { Component } from 'react'; import { Form, Layout } from 'antd'; const { Header, Footer, Sider, Content } = …

Read More
Violation Forced reflow while executig Javascript in console when tooltip appear on slider handle

I have a web page with some elements and Ant.design slider present too. Slider values is controlled by React state. When slider tooltip is turn on, slider is very slow down and in console I see a message [Violation] …

Read More
how to get field value on change for FormItem in antd

I am having a hard time with antd's form. I have this select field in this form and I want to get the value from it onChange but somehow not getting it to work properly. say this is the item …

Read More