粘性导航栏滚动消失问题：设置固定高度区块后如何保持置顶？

问题原因 #

你的粘性导航栏.header被包裹在一个父<div>中，position: sticky的元素是基于最近的滚动祖先生效的。当给.test-section设置固定高度后，要么是父容器的滚动上下文发生变化导致粘性定位失效，要么是.test-section内溢出的图片通过堆叠上下文覆盖了导航栏。

修复方案 #

方案1：将导航栏移到最外层（最简单有效） #

把.header从当前的父<div>中取出，让它直接作为<body>的子元素，这样它的滚动上下文就是浏览器视口，粘性定位会完全正常工作：

修改后的HTML代码：

<div class="header">
  hi navbar
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque urna. Quisque semper turpis vitae suscipit eleifend. Mauris sed nisl at eros tristique accumsan vitae nec libero. Cras et laoreet mauris, eget posuere ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque utur, ve
</p>
</div>
<div class="test-section">
<img src="https://commonslibrary.parliament.uk/content/uploads/2018/02/The_City_London-scaled.jpg">
</div>

方案2：修复父容器的滚动上下文（保留原有结构） #

如果必须保留.header在父容器内，需要确保父容器不会干扰粘性定位的滚动上下文：

1. 给包裹.header的外层div添加类（比如.header-container），并设置以下CSS：

.header-container {
  overflow: visible; /* 明确设置为visible，避免继承其他overflow属性 */
  min-height: 100vh; /* 确保父容器高度至少覆盖视口，防止粘性失效 */
}

方案3：强化堆叠层级（解决被覆盖问题） #

如果导航栏是被.test-section的溢出内容（比如图片）覆盖，给.test-section设置更低的层级，并可选隐藏溢出内容：

.test-section {
  height: 300px;
  background: red;
  z-index: 1; /* 低于.header的z-index:100 */
  overflow: hidden; /* 可选，防止图片溢出容器 */
}

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