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

位置：粘性只会漂浮在子元素上，没有父div不会漂浮在“内容”上。

您可以在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>

位置：高内容的粘性中断

2 个答案: