I have a webpage that contains specific content followed by a bar with tabs. My goal is to have this bar stay fixed at the top of the screen once it reaches that position while scrolling down, and only allow the content below the fixed bar to continue scrolling. Conversely, when scrolling back up, the bar should also move accordingly.
For reference, here's an example of the desired behavior: https://jsfiddle.net/cc48t
The technologies I am using for this are React and Tailwind CSS.
This is the code snippet for the Tabs Bar:
<div className={`mt-7 w-full flex flex-col items-center border`}>
<div
className={``}
>
<ul className="flex">
{navs.map((element) => {
return (
<li
key={element.id}
className={` border-r text-sm first:border-l`}
>
<button
onClick={() => setNav(element.name)}
className={`${
nav === element.name &&
"text-green-400 bg-green-50 font-semibold border-b border-green-400 "
} px-6 py-2`}
>
{element.name}
</button>
</li>
);
})}
</ul>
</div>
{nav === "Tasks" && <Tasks caseInfo={caseInfo} />}
{nav === "Events" && <Events caseInfo={caseInfo} />}
{nav === "Notes" && <Notes caseInfo={caseInfo} />}
</div>