页面内容高度超body时，如何让position:sticky头部正常生效？

你的问题核心在于：position:sticky的粘性效果依赖于它的最近滚动祖先元素的高度——如果祖先元素（这里是body）被设置了固定高度，当内部内容超过这个高度时，祖先元素的滚动范围就被限制了，sticky元素会跟着祖先元素的底部一起滚出视口。

要在不把头部和.long-div放到同一容器的前提下解决，只需要做一个关键修改：

解决方案：移除body的固定height设置 #

让body自动适应内容高度，不要用固定height限制它的高度。修改后的代码如下：

CSS代码 #

.sticky {
  position: sticky;
  background: #efe;
  top: 0;
  z-index: 100; /* 可选，防止头部被下方内容覆盖 */
}

body {
  margin: 0;
  padding: 0;
  /* 删掉height:3000px，让body自适应内容高度 */
  background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}

.long-div {
  height: 4000px;
}

HTML代码（无需修改） #

<div class="sticky">header</div>

<div class="long-div">
 Content with height more than body's 3000px;
</div>

原理说明 #

当body不设置固定height时，它会被内部的.sticky和.long-div完全撑开，高度等于头部高度加上4000px。此时position:sticky的滚动范围是整个页面的内容高度，头部会一直保持在视口顶部，直到你滚动到页面最底部。

如果你的场景中需要给body设置最小高度（比如确保页面至少占满视口），可以用min-height:100vh代替固定height，这样既保证了页面高度，又不会限制内容超过时的自适应撑开。

内容的提问来源于stack exchange，提问作者AGamePlayer