如何解决技能进度条在Sticky Navbar中溢出的问题？

云原生阿岚

2026-8-11

问题根源

Sticky导航栏未设置层级优先级（z-index），滚动时下方技能模块会覆盖导航栏
页面section无顶部内边距，内容紧贴导航栏下方，视觉上呈现"溢出"效果

修复方案

1. 提升导航栏层级

修改.sticky类的CSS，添加z-index确保导航栏始终处于最上层：

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999; /* 数值足够大即可，确保层级高于其他元素 */
}

2. 给section添加顶部内边距

避免技能模块被导航栏遮挡，设置与导航栏高度匹配的内边距：

section {
  padding-top: 80px; /* 导航栏高度为80px，保持一致 */
}

3. 优化技能模块的媒体查询范围（可选）

你当前把技能进度条的CSS写在了max-width:858px的媒体查询内，这意味着仅小屏幕生效。建议将这部分样式移到媒体查询外，确保全尺寸屏幕正常显示：

/* 移出@media (max-width: 858px)媒体查询 */
.details {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bar {
  position: relative;
  border: 2px solid #0d96e0;
  border-radius: 20px;
}
.bar div {
  position: relative;
  width: 0;
  height: 9px;
  border-radius: 10px;
  background-color: #0d96e0;
}
.skills:not(:last-child) {
  margin-bottom: 30px;
}
#html-bar {
  animation: html-fill 2s forwards;
}
@keyframes html-fill {
  100% {
    width: 90%;
  }
}
#css-bar {
  animation: css-fill 2s forwards;
}
@keyframes css-fill {
  100% {
    width: 75%;
  }
}
#javascript-bar {
  animation: js-fill 2s forwards;
}
@keyframes js-fill {
  100% {
    width: 72%;
  }
}
#jQuery-bar {
  animation: jQuery-fill 2s forwards;
}
@keyframes jQuery-fill {
  100% {
    width: 68%;
  }
}
span {
  color: white;
  font-family: 'Poppins', sans-serif;
}