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

Issue

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 class="col-lg-8">

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

    <div class="container">
      <div class="row">
        <div class="col-lg-4">
                    <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=%23FFFFFFFF&l=f&o=t&aim=true" height="600" width="50">                                                    
        </div>
        <div class="col-lg-8">
          <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=%23FFFFFFFF&l=f&o=t&aim=true" alt="position-sticky" class="fixed">
        </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.

Solution

use position: sticky and top: css for image

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

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

    <div class="container">
      <div class="row">
        <div class="col-4">
                    <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=%23FFFFFFFF&l=f&o=t&aim=true" height="600" width="50">                                                    
        </div>
        <div class="col-8 position-relative">
          <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=%23FFFFFFFF&l=f&o=t&aim=true" alt="position-sticky" class="fixed">
        </div>
      </div>
        </div>
        <div style="height: 500px"></div>

Answered By - AG_