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

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/[email protected]/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.

htmlcsstwitter-bootstrapbootstrap-5


Solution 1:[1]

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 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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AG_

Related Questions