How do I make image inside bootstrap 5 col to follow scroll but not below the col itself-CodePudding

in the following code the image inside "fixedContainer" is located on the top of the div, but if the sidebar has a large amount of data it is large in height so the user has to scroll. How can I make the image follow the scrolling but not below end of <div >

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <div >
      <div >
        <div >
                    <img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RWMGbF?ver=ecec&q=90&m=6&h=201&w=358&b=#FFFFFFFF&l=f&o=t&aim=true" height="600" width="50">                                                    
        </div>
        <div >
          <img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RWMGbF?ver=ecec&q=90&m=6&h=201&w=358&b=#FFFFFFFF&l=f&o=t&aim=true" alt="position-sticky" >
        </div>
      </div>
        </div>

NOTE: I have edit the post and added a picture to the left with a high height set to it. But the code need to be run in full screen to see the issue, otherwise the col is stacked on top of each other.

CodePudding user response：

use position: sticky and top: css for image

.fixed{
  position: sticky;
  top: 20px
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <div >
      <div >
        <div >
                    <img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RWMGbF?ver=ecec&q=90&m=6&h=201&w=358&b=#FFFFFFFF&l=f&o=t&aim=true" height="600" width="50">                                                    
        </div>
        <div >
          <img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RWMGbF?ver=ecec&q=90&m=6&h=201&w=358&b=#FFFFFFFF&l=f&o=t&aim=true" alt="position-sticky" >
        </div>
      </div>
        </div>
        <div style="height: 500px"></div>