Javascript 更改滚动条上标题的背景色

我想在标题滚动时更改标题的背景色（从透明到黑色）。我该怎么做

我使用CMS创建标题。这就是我目前的代码：

jQuery（函数（$）{
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>50）{
$（“#节填充”）.addClass（'reduce-section-padding'）；
$（“#行宽度”）.addClass（'rease-row-width'）；
$（“#我的网站徽标”）.addClass（'reduce-logo'）；
}否则{
$（“#节填充”）.removeClass（'reduce-section-padding'）；
$（“#节填充”）.addClass（'slow-transition'）；
$（“#行宽度”）.removeClass（'rease-row-width'）；
$（“#行宽”）.addClass（“慢转换”）；
$（“#我的网站徽标”）.removeClass（'reduce-logo'）；
$（“#我的网站徽标”）.addClass（“慢转换”）；
}
});
});
.减少节填充{
过渡：所有0.9都从0变为0；
填充顶部：0px！重要；
填充底部：0px！重要；
}
.减少标识{
过渡：所有0.9都从0变为0；
变换：比例（0.8）！重要；
/*标准语法*/
/*内容：url（/wp content/uploads/2020/05/favicon.png）！重要信息*/
}
.增加行宽{
过渡：所有0.9都从0变为0；
宽度：70%！重要；
}
.缓慢过渡{
过渡：所有0.9都从0变为0；
}
#主要内容{
利润率最高：5vw；
}

您可以像这样使用普通JavaScript： （JSFiddle:） 将以下

脚本

标记及其内容放在现有

脚本

标记下（或将以下

脚本

标记的内容放在现有

脚本

标记内）：

var prevScrollpos=window.pageYOffset；
window.onscroll=函数（）{
var currentScrollPos=window.pageYOffset；
如果（window.pageYOffset==0）{
document.getElementById（“header”）.style.backgroundColor=“透明”；
document.getElementById（“标题”）.style.color=“黑色”；
}否则{
document.getElementById（“header”）.style.backgroundColor=“黑色”；
document.getElementById（“标题”）.style.color=“白色”；
}
prevScrollpos=当前ScrollPos；
}

您可以添加html和css并创建代码片段吗？这是网站，在这里您可以看到标题感谢您的重播，但我不知道我必须在哪里插入此代码。你能再帮我一次吗DHey@Billy，我相信你可以在

标签中插入此代码，我认为这是页面上的任何地方。与上面的jQuery代码相同。我在我的Wordpress页脚中使用了这个代码，Wordpress在每一页上复制页脚，所以代码被应用到每一页。因此，我认为在jQuery脚本旁边的

脚本

标记中，甚至与jQuery代码共享相同的

脚本

标记。谢谢，我为代码插入了另一个部分，现在它可以工作了！：）

<script>
  var prevScrollpos = window.pageYOffset;
  window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (window.pageYOffset === 0) {
      document.getElementById("header").style.backgroundColor = "transparent";
      document.getElementById("header").style.color = "black";
    } else {
      document.getElementById("header").style.backgroundColor = "black";
      document.getElementById("header").style.color = "white";
    }
    prevScrollpos = currentScrollPos;
  }
</script>