for example
try the code

#sticky-sidebar{ position: sticky; top: 0;}

I’m leaving a few resources

https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
https://www.w3schools.com/howto/howto_css_image_sticky.asp

Im building a react website and am using Bootstrap 4. On one of my page in the content body I have a two column layout. The left side is a sidebar and on the right is a long column of content. When scrolling I want to keep the left sidebar on top.

Here is a picture for illustration:

My current code works, however when scrolling down the sidebar gets fixed/positioned at the center instead of the top. It looks like it’s being aligned as if the header is still above it. Here is my current code:

<div className="header-wrap">
    //Header Here
</div>

<div className="container">
    <div className="row">
        <div className="col-3 position-fixed" id="sticky-sidebar">
            //Sidebar here
        </div>
        <div className="col offset-3" id="main">
            //body here
        </div>
    </div>
</div>

<div className="footer-wrap">
    //Footer Here
</div>

My goal is as you scroll, the header leaves the screen (which it already does) the sidebar gets positioned to the top.