Sticky导航栏下拉菜单未滚动时推移页面内容问题排查

问题根源 #

你的导航栏在未滚动时点击下拉菜单能推动内容下移，但滚动后无法实现，核心原因是滚动后导航栏处于sticky粘性定位状态，此时添加.responsive类会把定位改成relative，导致导航栏回到文档流的原始位置（已滚出视口），展开的菜单无法触发现有视口内的内容移位。

未滚动时，导航栏在文档流中，relative定位的元素展开菜单会正常推动下方内容；但滚动后，sticky让导航栏固定在顶部，此时强制改成relative，导航栏会回到它在页面中的初始位置（视口上方），展开的菜单在视口外，自然不会影响当前视口内的内容。

修复步骤 #

修改移动端媒体查询中.topnav.responsive的定位属性，不要覆盖sticky，保持粘性定位的同时让菜单正常展开：

修改后的CSS代码片段 #

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: sticky; /* 替换原来的relative，保持粘性定位 */
    top: 0;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive .navLink {
    float: none;
    display: block;
    text-align: left;
  }
}

额外优化（可选） #

如果希望菜单展开时导航栏的背景能完整包裹所有选项，可以在.topnav.responsive中添加overflow: visible，避免菜单被裁剪：

.topnav.responsive {
  position: sticky;
  top: 0;
  overflow: visible;
}

验证效果 #

修改后，无论是否滚动页面，点击下拉图标展开菜单时，导航栏都会保持在顶部，同时展开的菜单会正常推动下方内容下移；收起菜单时，内容也会随之回位。

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