粘性头部滚动时背景与文字颜色不生效问题求助

问题诊断与修复方案 #

1. 修复滚动检测失效问题

你的body样式设置了height:100vh，这会强制页面高度固定为视口大小，导致内容超出视口时滚动事件无法被正确识别。将其改为min-height:100vh，让body高度自适应内容：

body{
    width: 100vw;
    min-height: 100vh; /* 替换原height:100vh */
    margin: 0;
    background: #222;
}

2. 补充粘性头部的文字颜色样式

当前header.sticky仅修改了背景色和内边距，没有覆盖logo和导航链接的文字颜色规则，导致文字始终保持白色。需要新增针对性选择器来更新颜色：

header.sticky {
  padding: 40px 100px;
  background-color: black;
}

/* 粘性状态下的logo颜色 */
header.sticky .logo {
  color: cyan; /* 可按需调整颜色 */
}

/* 粘性状态下的导航链接颜色 */
header.sticky ul li a {
  color: #ccc; /* 可按需调整颜色 */
}

3. 验证JavaScript逻辑

你的JS代码本身无问题，它会在滚动时为header添加/移除sticky类。确保JS文件路径正确且放在body末尾（当前代码位置符合要求）。

修改后的核心CSS片段：

body{
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    background: #222;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.6s;
  padding: 40px 5px;
  z-index: 1000;
}

header.sticky {
  padding: 40px 100px;
  background-color: black;
}

header.sticky .logo {
  color: cyan;
}

header.sticky ul li a {
  color: #ccc;
}

完成上述修改后，滚动页面时头部的背景色和文字颜色会按预期切换。

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