React.js粘性导航栏实现求助：如何让导航栏固定在屏幕顶部？

要让导航栏固定在屏幕顶部，核心是通过CSS的position: fixed属性实现，同时处理页面内容被遮挡的问题。以下是具体步骤：

1. 添加导航栏固定样式 #

给你的.nav类添加如下CSS属性：

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff; /* 根据你的设计需求修改颜色 */
  z-index: 1000; /* 确保导航栏始终在其他内容上方 */
  padding: 1rem 1.5rem; /* 保留原有内边距，可根据实际调整 */
  box-sizing: border-box; /* 避免width:100%加上padding后超出屏幕 */
  box-shadow: 0 2px 3px rgba(0,0,0,0.1); /* 可选，添加阴影增强层次感 */
}

2. 解决页面内容被遮挡的问题 #

固定定位的元素会脱离文档流，页面顶部内容会被导航栏挡住，需要给页面主体添加顶部内边距：

body {
  padding-top: 70px; /* 该值需要和导航栏的实际高度一致，可根据调整后的导航栏高度修改 */
}

3. 适配响应式菜单 #

如果你的响应式导航菜单（.responsive_nav）展开后布局异常，可添加如下样式确保正常显示：

.responsive_nav {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #ffffff; /* 和导航栏背景色保持一致 */
  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
}

完成以上修改后，刷新页面即可看到导航栏固定在屏幕顶部，滚动页面时不会跟随滚动，同时页面内容也不会被遮挡。

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