Search code examples
cssreactjstabsantd

How to create Tab Bar header as Fixed/Sticky in React/Antd?

I need to make fixed my tab bar headers which is opening in a drawer. Here is what I have tried.
Antd recommends react-sticky lib. Somehow it does not work. Maybe the reason is drawer scroll etc. Even if I hide the drawer scroll and create a scroll for tab body, sticky is not worked.

Ant Sticky Referans : https://ant.design/components/tabs/ enter image description here

react-sticky package : https://www.npmjs.com/package/react-sticky

position: -webkit-sticky;
position: sticky;
top: 0;

I also tried hard css but it does not work as well.

Solution

  • I look for Antd how handles the subject : fixed/sticky [sth]. So I find out Header from Layout component. Setting the style position fixed solved my problem. May be this is not a perfect solution but at least now in a drawer Tab Bar Headers are fixed. Final codes are :

    const renderTabBar = (props, DefaultTabBar) => (
    <Layout>
        <Header style={{ position: 'fixed', zIndex: 1, top: 0, padding: 0, width: '100%', 
          background: 'white' }}>
            <DefaultTabBar {...props} style={{
                top: 20,
            }} />
        </Header>
    </Layout>

    );

        <Drawer
    placement="right"
    onClose={onClose}
    visible={visible}
    getContainer={false}
    title={<> </>}
    style={{ position: 'absolute' }}
    width={"25%"}
    keyboard={true}
    closable={true}
    closeIcon={<CloseOutlined />}
    mask={false}
    maskClosable={false}
    headerStyle={{ border: 'none' }}>
    <Tabs tabPosition="top"
        renderTabBar={renderTabBar}
        animated={true}
        style={{ paddingTop: 20 }}>
        {tabBody}
    </Tabs>
</Drawer >