Header

Navbar

Body

the body is where i have my sidebar i the left and the content in the right which gonna be articles cuz im working on a blog app, the problem is with my scrollable sticky sidebar that i wanna design it to be like this one :
https://youtu.be/20Dzekx2qSI?si=TMXI0lGWSzM_voJw

just like the sidebar that “Medium.com” has.

You can try to fix this using frame motion also if you can i would love to use that

btw the page has a parallax header and a sticky navbar which get visible if you scroll up but hidden when scroll down this doesnt matter but just to make you know that the sideup is not in the top of the page

Here is the code Thank you:

const TheChronicle = () => {
  const sidebar = document.getElementById("sidebar");
  const sidebar_content = document.getElementById("content_wrapper");

  window.onscroll = () => {
    let scrollTop = window.scrollY;
    let viewPortHeight = window.innerHeight;
    let contentHeight = sidebar_content.offsetHeight;
    let sidebarTop = sidebar.getBoundingClientRect().top + window.scrollY;

    if (scrollTop >= contentHeight - viewPortHeight + sidebarTop) {
      sidebar_content.style.position = "fixed";
      sidebar_content.style.transform = `translateY(${
        contentHeight - viewPortHeight + sidebarTop
      }px)`;
    } else {
      sidebar_content.style.position = "";
      sidebar_content.style.transform = "";
    }
  };

  return (
    <div className="flex">
      {/* Change the h-screen to h-full later */}
      <div className="h-full w-2/3 ">
        <div className="bg-yellow-400 w-full h-full">
          lorem1000...
        </div>
      </div>
      <div className=" h-full w-1/3" id="sidebar">
        <div className="bg-orange-400 w-full h-full" id="content_wrapper">
          lorem500 ...
        </div>
      </div>
    </div>
  );
};

export default TheChronicle;

………………..