React Vertical Timeline 溢出顶部粘性导航栏问题求助

核心原因 #

粘性定位的导航栏被覆盖，本质是CSS堆叠上下文层级冲突：导航栏的z-index值低于Vertical Timeline组件内部元素（比如时间节点图标、内容卡片）的层级，导致被压在下方。

解决方案 #

1. 提升导航栏的堆叠层级（优先方案）

给你的粘性导航栏添加足够高的z-index值，同时确保导航栏设置了background-color（避免透明背景下仍能看到下方时间线）：

/* 假设你的导航栏类名为navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000; /* 远高于timeline默认的z-index值 */
  background-color: #ffffff; /* 根据你的网站主题调整颜色 */
}

react-vertical-timeline-component的默认样式中，时间节点图标的z-index为4，内容卡片的z-index为1，设置z-index:1000可以确保导航栏始终在最上层。

2. 给时间线容器添加上边距（辅助优化）

如果导航栏遮挡了时间线的顶部内容，可以给Experience组件的容器添加上边距，数值等于导航栏的高度：

/* Experience组件的容器类名 */
.experience {
  padding-top: 70px; /* 替换成你导航栏的实际高度 */
}

验证调整 #

修改后滚动页面，检查导航栏是否始终在时间线上方，同时时间线内容不会被导航栏遮挡。

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