在下面的代碼中,“fixedContainer”中的影像位于 div 的頂部,但如果側邊欄有大量資料,它的高度很大,所以用戶必須滾動。如何使影像跟隨滾動但不低于末尾<div >
<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=#FFFFFFFF&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=#FFFFFFFF&l=f&o=t&aim=true" alt="position-sticky" class="fixed">
</div>
</div>
</div>
注意:我已經編輯了帖子并在左側添加了一張圖片,并設定了高高度。但是代碼需要全屏運行才能看到問題,否則 col 會堆疊在一起。
uj5u.com熱心網友回復:
使用position: sticky和top:css 影像
.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=#FFFFFFFF&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=#FFFFFFFF&l=f&o=t&aim=true" alt="position-sticky" class="fixed">
</div>
</div>
</div>
<div style="height: 500px"></div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/445228.html
