HTML头部使用position:sticky不生效，该如何实现吸顶效果？

问题根因 #

position: sticky 元素的吸顶生效范围完全被限制在它的直接父元素的高度区间内，你当前代码中 .parent_header 高度与内部吸顶元素 .header 完全一致，均为100px。当页面滚动距离超过100px后，父容器已经完全滚出视口，内部的sticky元素会跟着父容器一起移出视口，自然无法实现持续吸顶的效果。

解决方案 #

你可以根据实际业务需求二选一：

• 方案一：移除冗余的外层父容器，直接给头部元素设置sticky属性，调整后代码如下：
  HTML代码：

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

CSS代码：

.header {
  background-color: green;
  width: 100vw;
  height: 100px;
  position: sticky;
  top: 0;
}

.test_height {
  background-color: red;
  width: 100vw;
  height: 1000px;
}

• 方案二：如果必须保留.parent_header外层容器，删除父容器的固定高度设置，同时确保父容器未设置overflow: hidden、overflow: auto、overflow: scroll这类会中断sticky效果的属性，调整后CSS代码如下：

.parent_header {
  /* 移除固定高度限制即可，如需额外父容器样式可自行补充 */
}

.header {
  background-color: green;
  width: 100vw;
  height: 100px;
  position: sticky;
  top: 0;
}

.test_height {
  background-color: red;
  width: 100vw;
  height: 1000px;
}

补充说明：如果调整后仍未生效，可顺带排查页面根元素html、body是否设置了overflow-x: hidden，该属性会全局导致sticky效果失效。

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