Solution 1 :

for example
try the code

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

I’m leaving a few resources

Problem :

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

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

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


Comment posted by JImmy G

I tried that, but it positions it to the top of the header as well I just need it to stick to the top once it starts scrolling

Comment posted by

Is this what you want to do?