如何在 bootstrap 5 col 内制作图像以跟随滚动但不低于 col 本身

Question

在下面的代码中，“fixedContainer”中的图像位于 div 的顶部，但如果侧边栏有大量数据，它的高度就会很大，因此用户必须滚动。如何使图像跟随滚动但不低于 <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>

注意：我编辑了 post 并在左侧添加了一张设置了高高度的图片。但代码需要运行全屏才能看到问题，否则 col 会堆叠在一起。

Answer 1

对图像使用 position: sticky 和 top: css

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

如何在 bootstrap 5 col 内制作图像以跟随滚动但不低于 col 本身

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

html

css

twitter-bootstrap

bootstrap-5