Fix navbar after it touch the top of screen in ReactJS

Issue

I have a page with certain content followed by a bar containing tabs. While scrolling down the page, I want the bar to become fixed at the top of the screen once it reaches the top. Subsequently, only the content below the fixed bar should continue to scroll. Conversely, when scrolling up, the bar should also scroll.

Here is an example of what I'm aiming for: https://jsfiddle.net/cc48t

I am using React and Tailwind CSS.

Code for 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>

Solution

Simply use sticky top-0 to your nav bar.

https://tailwindcss.com/docs/position#sticky-positioning-elements

Answered By - SaiMyo Myat