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 >