🧐[问题 | question] ant design pro如何自定义Header，并且允许Header不是固定在上方。

🧐 问题描述 | Problem description

我正在使用Ant design pro做一个网站开发。现在遇到一个idea不知道要怎么实现。我想在顶部Header的基础之上，在上方添加一个轮播图，并且能够滑动下来。类似于这样

我是通过设置app.tsx里的headerRender设置的，现在就出现正文contet和侧边栏sider都会被顶部header挡住。

我尝试过调整global.less的样式调整 content 和 sider 与header的边距，但是又出现上方一直固定在上面，轮播图和header固定在上方（我想让轮播图区域可以被滚动下来），导致正文和侧边栏的区域变小。要怎么样才能正确设置header的渲染？

💻 示例代码 | Sample code

// app.tsx export const layout: RunTimeLayoutConfig = ({ initialState }) => { return { avatarProps: { render: () => { return ; }, }, headerRender: (props, defaultDom) => { return ( <> <div style={{ display: 'flex', flexDirection: 'column', background: "#F5F5F5"}}> <Carousel autoplay dotPosition={"bottom"} style={{ width: '100%', height: "300px" }}>

1

                        <div>
                            <h3 style={{
                                margin: 0,
                                height: '160px',
                                color: '#fff',
                                lineHeight: '160px',
                                textAlign: 'center',
                                background: '#364d79',
                            }}>2</h3>
                        </div>
                        <div>
                            <h3 style={{
                                margin: 0,
                                height: '160px',
                                color: '#fff',
                                lineHeight: '160px',
                                textAlign: 'center',
                                background: '#364d79',
                            }}>3</h3>
                        </div>
                        <div>
                            <h3 style={{
                                margin: 0,
                                height: '300px',
                                color: '#fff',
                                lineHeight: '160px',
                                textAlign: 'center',
                                background: '#364d79',
                            }}>4</h3>
                        </div>
                    </Carousel>
                    <div style={{ width: '100%'}}>
                        {defaultDom}
                    </div>
                </div>
            </>
        );
    },
    menu: {
        defaultOpenAll: true
    },
    logo: <LogoIcon/>,
    menuHeaderRender: undefined,
    ...defaultSettings,
};

};

// 我尝试调整的global.less .ant-layout { min-height: 100vh; margin-top: 200px; // 调整和header的边距

}

.ant-pro-sider { margin-top: 300px; // 调整和header的边距 }

// 我的defaultSetting.ts const Settings: ProLayoutProps & { pwa?: boolean; logo?: string; } = { navTheme: 'light', // 拂晓蓝 colorPrimary: '#1890ff', layout: 'mix', contentWidth: 'Fluid', fixedHeader: true, fixSiderbar: true, colorWeak: false, title: 'xxx', pwa: true, iconfontUrl: '', token: { }, };

🚑 其他信息 | Other information

OS: Windows 11

Node：18.18.0

浏览器 | browser：Google Chrome 123.0.6312.106

Ant design pro：6.0

antd: 5.2.2

react: 18.2

umijs/max: 4.0.52

ant-design / ant-design-pro