My goal is to implement a sticky sidebar that moves smoothly across specific components on my webpage. The challenge I am facing is that the CSS 'sticky' property only allows movement within the component it was created in. So, my question is - what is the most effective solution to ensure the sticky sidebar stays fixed only across 3-4 designated components? I need this functionality exclusively for those components while maintaining other elements with fixed positioning.
export default function Home() {
return (
<div className={styles.container}>
<Navbar />
<LandingPage />
{* from here sticky sidebar *}
<About />
<Products />
{* to this point }
<Footer />
</div>
)
}