reactjs - Sticky headers, with react-tabs - Stack Overflow

admin管理员组

文章数量:1125082

In a web app (NextJS/React) I am using react-tabs to handle tabs.

I wonder how to keep the tab headers sticky. That is preventing them from scrolling up and disapearing when I scroll up the contents of the page.

After searching the net, I tried to use react-sticky, but it does not seem to work.

I even get the impression that react-tabs and react-sticky are not supposed to work together. Tell me if I am wrong.

Here is the relevant current code:

import { Tabs,TabList,Tab,TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
.....

return (
  <Tabs defaultIndex={tabInit()}>
    <TabList>
      <Tab>Title-One</Tab>
      <Tab>Title-Two</Tab>
      <Tab>Title-Three</Tab>
      <Tab>Title-Four</Tab>
      <Tab>Title-Five</Tab>
      <Tab>Title-Six</Tab>
    </TabList>
    <TabPanel><Contents-One/></TabPanel>
    <TabPanel><Contents-Two/></TabPanel>
    <TabPanel><Contents-Three/></TabPanel>
    <TabPanel><Contents-Four/></TabPanel>
    <TabPanel><Contents-Five/></TabPanel>
    <TabPanel><Contents-Six/></TabPanel>
  </Tabs>
)

How can I get the effect I need while using react-tabs ?

In a web app (NextJS/React) I am using react-tabs to handle tabs.

I wonder how to keep the tab headers sticky. That is preventing them from scrolling up and disapearing when I scroll up the contents of the page.

After searching the net, I tried to use react-sticky, but it does not seem to work.

I even get the impression that react-tabs and react-sticky are not supposed to work together. Tell me if I am wrong.

Here is the relevant current code:

import { Tabs,TabList,Tab,TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
.....

return (
  <Tabs defaultIndex={tabInit()}>
    <TabList>
      <Tab>Title-One</Tab>
      <Tab>Title-Two</Tab>
      <Tab>Title-Three</Tab>
      <Tab>Title-Four</Tab>
      <Tab>Title-Five</Tab>
      <Tab>Title-Six</Tab>
    </TabList>
    <TabPanel><Contents-One/></TabPanel>
    <TabPanel><Contents-Two/></TabPanel>
    <TabPanel><Contents-Three/></TabPanel>
    <TabPanel><Contents-Four/></TabPanel>
    <TabPanel><Contents-Five/></TabPanel>
    <TabPanel><Contents-Six/></TabPanel>
  </Tabs>
)

How can I get the effect I need while using react-tabs ?

• reactjs
• next.js
• react-tabs

Share Improve this question Follow edited 2 days ago Michel asked 2 days ago MichelMichel 11.7k2020 gold badges100100 silver badges216216 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

You can achieve this using plain CSS.

1. Add a container around the <Tabs> component
2. Give fixed height to the above container
3. Add position: sticky; to the <TabList> component.

Here is a sample code to try.

File: App.css

.tab-container {
  max-height: 400px; /* adding height to create scroll */
  overflow-y: auto;
  border: 1px solid #ccc;
  position: relative;
}

.tab-list {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
  border-bottom: 1px solid #ccc;
  margin: 0;
}

Update the component as below to apply the CSS classes

File: App.js

import { Tab, Tabs, TabList, TabPanel } from "react-tabs";

import "react-tabs/style/react-tabs.css";
import "./App.css";

function App() {
  return (
    <div className="tab-container">
      <Tabs>
        <TabList className="tab-list">
          <Tab>Title 1</Tab>
          <Tab>Title 2</Tab>
        </TabList>

        <TabPanel>
          <h2>Any content 1</h2>
          <p>
            This will cause scrolling if it's long enough.
            Add more text here to see the scrolling effect, if required.
          </p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
        </TabPanel>
        <TabPanel>
          <h2>Any content 2</h2>
          <p>
            This is another content section with small content.
          </p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
        </TabPanel>
      </Tabs>
    </div>
  );
}

export default App;

Here is the code in a playground: https://playcode.io/2216306

Let me know if you can see the required effect after these changes or if you face any error.

I would rather look at navs that have a tab-like behavior rather than forcing stickiness upon a tab component, which is meant to be used within content and hence should scroll with the page.

You could take a look at React Bootstrap's Navs and tabs or other libraries for navigation components.

Good luck!

本文标签： reactjsSticky headerswith reacttabsStack Overflow