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;
………………..
Taha Nait eddouch is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.