如何修复滚动时粘性头部（sticky header）样式不生效的问题？

问题原因 #

你的CSS选择器写法错误，导致sticky类的样式无法匹配到对应的header元素：

• 你在JS中是给header元素本身添加sticky类，而CSS中写的header .sticky（中间带空格）是后代选择器，只会匹配header内部带sticky类的子元素，完全匹配不到添加了sticky类的header自身。
• 你的header默认没有设置黑色背景，所以初始状态的黑色背景效果也没有生效，自然看不出滚动后的背景切换。

修复方案 #

1. 修正所有和sticky相关的CSS选择器，去掉header和.sticky之间的空格：

/* 替换原来的header .sticky规则 */
header.sticky{
 background: #fff;
 padding: 20px 100px;
 box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
/* 替换原来的header .sticky .logo规则 */
header.sticky .logo{
 color: #111;
}
/* 替换原来的header .sticky ul li a规则 */
header.sticky ul li a{
 color: #111;
}

2. 给header添加默认黑色背景，补全初始样式：

header{
 position: fixed;
 top:0;
 left:0;
 width: 100%;
 padding: 2.500em 6.250em;
 z-index: 100;
 display: flex;
 justify-content: space-between;
 align-items:center;
 transition: 0.5s;
 /* 新增下行补全默认黑色背景 */
 background: #000;
 /* 新增下行避免padding导致header宽度溢出出现横向滚动条 */
 box-sizing: border-box;
}

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