我有一個定位sticky但在某些情況下大于螢屏高度的側邊欄。
如果側邊欄實際上比螢屏高度更大，我不希望它粘在頂部。它應該隨著頁面內容向下滾動。
我正在sticky-top為此使用 Bootstraps 類。
它具有以下屬性：
.sticky-top {
position: sticky;
top: 0;
z-index: 1020;
}
在我的情況下，我將其更改為top: 0，top: 50px因為我需要上面的空間。
這是一些示例代碼：https ://codepen.io/cray_code/pen/ZEaOXwo
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="toc sticky-top">
<nav class="list-group">
Links (see example)
</nav>
</div>
</div>
<div class="col-lg-9">
Content (see example)
</div>
</div>
</div>
我從這里嘗試了解決方案，并將以下代碼添加到我的課程中：
.toc {
overflow-y: auto;
max-height: 100vh;
}
但這無濟于事。
有沒有純 CSS 解決方案，還是我需要使用 JavaScript？
uj5u.com熱心網友回復：
不確定這是否是您想要的，但也許calc()在您的 css 中使用對您有幫助。
.toc{
overflow-y: auto;
max-height: calc(100vh - 50px);
}
uj5u.com熱心網友回復：
希望這支筆有幫助
一些解釋：
- 在 js 中，我們使用
.offsetHeight&.clientHeight來獲取高度，我們檢查天氣這個高度（493px）50px偏移量是否大于螢屏高度。 - 當螢屏尺寸較小時，我們將位置設定為
static - 我們也設定
margin-top: 50px而不是top: 50px
因為top僅適用于sticky并且margin-top適用于static
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429636.html