如何在React中创建位于div内部的sticky粘性导航栏

不需要使用JavaScript实现，纯CSS即可满足粘性导航栏的需求，你之前对position: sticky的规则存在误解，我先做澄清，再给出解决方案：

首先纠正误区：position: sticky 元素并非不能有父元素，绝大多数场景下的sticky失效都是以下几个原因导致的：

• 任意一级祖先元素设置了 overflow: hidden、overflow: auto 或 overflow: scroll，会截断sticky元素的吸附滚动范围
• 父元素高度和sticky元素自身高度完全一致，sticky元素没有滚动浮动的空间，自然不会出现吸附效果
• 没有为sticky元素明确设置top/bottom/left/right中的至少一个偏移值（你给出的代码里已经设置了top: 0，该问题不命中）

你后续没有修改代码问题自动修复，大概率是之前页面渲染异常，或者你之前为外层.app容器设置的overflow规则被意外移除导致的。

纯CSS生效方案 #

按照以下规则调整即可保证sticky导航稳定生效：

1. 检查所有sticky元素的祖先元素，确保没有设置任何非overflow: visible的属性，你的外层.app容器如果没有特殊滚动需求，不要额外配置overflow属性
2. 确保外层.app容器高度由内部Navbar和Content共同撑开，整体高度大于视口高度，保证页面能触发滚动
3. 为sticky导航设置z-index，避免滚动时被其他内容盖住

参考代码如下：

/* 全局重置，避免浏览器默认边距导致的滚动异常 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.app {
  /* 不需要加overflow配置，默认的visible即可 */
  min-height: 100vh;
}
.navbar {
  position: sticky;
  top: 0;
  z-index: 100; /* 层级配置，防止被内容覆盖 */
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: blueviolet;
}
/* 内容区设置足够高度触发滚动验证效果 */
.content {
  height: 2000px;
}

异常排查步骤 #

如果仍然出现失效问题，可按以下步骤排查：

• 打开浏览器开发者工具，选中Navbar元素，检查计算样式面板中的position属性是否为sticky，有没有被其他CSS规则覆盖
• 逐层向上检查所有祖先元素的overflow属性，确认均为默认的visible
• 检查父元素高度是否大于Navbar自身高度，保证有足够的滚动空间

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