位置：高内容的粘性中断

Question

我在 position: sticky 处理具有（相对）高内容的页面时遇到了一些问题。下面我设置了一个简单的页面，其中的内容模拟了一个 div 是视口高度的两倍。粘性 .palette 正确跟踪页面，直到最后几十个像素从屏幕顶部掉落。

body, html {
 margin: 0;
 width: 100%;
 height: 100%;
 background: #334;
}

.palette {
 position: sticky;
 top: 0;
 width: 300px;
 height: 20px;
 background: orange;
 border-radius: 5px;
 margin: 10px;
}

.content {
 height: 200vh;
 margin: 10px;
 background: #556;
 border-radius: 20px;
}

<div class="palette"></div>
<div class="content"></div>

无论是使用实际内容还是设置 .content 的像素高度似乎都不会改变这种效果。调色板开始随页面滚动的底部距离似乎随视口高度而变化。

为什么我的粘性 div 粘不正确？

Answer 1

Position: sticky 只会漂浮在子元素上，没有父元素 div 它不会漂浮在 "content".

您可以从 this medium article

中找到有关它如何工作的很好的解释

Answer 2

用父 div 包装这两个 div。

工作示例：

body, html {
 margin: 0;
 width: 100%;
 height: 100%;
 background: #334;
}

.palette {
 position: sticky;
 top: 0;
 width: 300px;
 height: 20px;
 background: orange;
 border-radius: 5px;
 margin: 10px;
}

.content {
 height: 200vh;
 margin: 10px;
 background: #556;
 border-radius: 20px;
}

<div class="wrapper">
<div class="palette"></div>
<div class="content"></div>
</div>

位置：高内容的粘性中断

position: sticky breaks for tall content

css

css-position

sticky