如何在CSS中让元素跳过直接父元素实现position:sticky？

问题分析 #

你的h1.sticky元素在移除.necessary-div父元素时正常工作，是因为此时它的滚动容器是全局的window；但保留父元素时，sticky的粘性范围被限制在.necessary-div内部——如果这个父元素高度较小，滚动时会很快滚出视口，导致h1无法持续粘在顶部。另外要注意：父元素如果设置了overflow: hidden/auto/scroll，也会创建局部滚动容器，让sticky只在父元素内生效。

解决方案 #

1. 清除父元素的溢出限制 #

确保.necessary-div没有设置会创建局部滚动的overflow属性：

.necessary-div {
  overflow: visible; /* 默认值，若被其他样式覆盖则显式声明 */
}

2. 扩展父元素的高度范围 #

给.necessary-div设置足够的最小高度，让它的范围覆盖到页面滚动的可视区域，保证h1的粘性能持续生效：

.necessary-div {
  min-height: calc(100vh - 180px); /* 180px为上方三个h2的大致高度，可根据实际调整 */
  /* 若上方元素高度不影响，直接设置 min-height: 100vh; 更简单 */
}

3. 优化后的完整代码 #

CSS：

html, body {
  margin: 0;
  padding: 0;
}
.sticky {
  position: sticky;
  top: 0;
  background: white; /* 可选，防止下方内容穿透显示 */
}
.necessary-div {
  overflow: visible;
  min-height: calc(100vh - 180px);
}

HTML无需修改，这样就能在保留.necessary-div的同时，让h1粘滞到页面顶部。

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