Javascript 尝试使用EventListener更改滚动条上的导航栏，但不起作用

目前正在尝试更改滚动条上的导航栏，以减小其大小并更改其中的颜色（具体来说，从透明背景更改为白色，并更改字体颜色）。这是HTML代码：

/*设置整个html文件字体*/
html{
字体系列：“nunito”，无衬线；
字体大小：10px；
}
/*确保任何锚都没有链接颜色*/
a、 a:悬停，a:聚焦，a:激活{
文字装饰：无；
颜色：继承；
}
/*为导航栏的容器设置一些描述*/
.包装纸{
位置：固定；/*保持固定*/
顶部：0；/*0自顶部开始*/
左：0；从左起为/*0*/
宽度：100%；/*确保它适合整个页面*/
填充：0 1.5rem；/*因为它们只是两个值，所以顶部和底部为0，左侧和右侧为1.5rem*/
边距：0自动；/*设置边距*/
/*转换允许我们向html文件中的元素添加转换*/
/*首先是转换什么，然后是转换速度，然后是转换类型*/
/*在我们的例子中，我们改变了背景颜色，并希望轻松地*/
过渡：背景色。5s轻松；
/*我们设置定义堆栈的z索引，以确保它始终高于任何值*/
z指数：9999；
}
/*设置导航栏的desc*/
.wrapper.navbar{
宽度：100%；/*再次确保宽度为100%*/
高度：10rem；/*将导航栏的高度设置为10rem*/
显示：flex；/*flex*/
对齐项目：居中；/*此选项定义横轴对齐，对齐所有中心（FLEX属性）*/
对齐内容：间距；/*这定义了横穿主轴的对齐方式、填充方式之间的间距（FLEX属性）*/
底部边框：2倍实心rgba（255255255.05）；/*在底部设置边框*/
填充：0 30px；
}
/*为导航栏徽标设置desc*/
.wrapper.navbar品牌{
颜色：黑色；/*现在，将徽标的颜色设置为黑色*/
字体大小：3.5rem；/*设置徽标的字体大小*/
字体大小：粗体；/*粗体*/
浮动：左；
}
/*为标题列表设置desc*/
.wrapper.navbar.menu ul li{
display:inline block；/*使其成为inline block，以便列表正好是水平的*/
边缘顶部：15px；/*在周围添加边缘，使其更美观*/
文本转换：大写；/*使所有文本都大写*/
字母间距：3px；
}
.标题列表{
显示：内联块；
浮动：无；
垂直对齐：顶部；
保证金：0自动；
}
.导航栏倒塌{
文本对齐：居中；
}
/*为导航栏的标题链接设置desc*/
.标题链接{
文字装饰：无；
颜色：黑色；
字体大小：1.6rem；
位置：相对位置；
保证金：0.2rem；
}
/******************导航栏效应******************/
/*：：after用于表示在每个对象标题链接之后，执行以下操作*/
/*在这里，我们想设置它，以便在悬停时添加一条线，现在我们设置实际的*/
/*之后应该是*/
.header链接：：之后{
内容：“”；/*与：：after一起使用，显示后面将显示的内容。此处，第行*/
宽度：100%；
高度：2倍；
背景色：黑色；
位置：绝对位置；
左：0；
底部：-3px；
/*此处的实际转换、方向、位置和类型*/
/*我们首先定义转换是什么，然后定义原点，然后在*/
/*转换以便我们可以编辑各种内容*/
变换：scaleX（0）；
变换原点：左；
转型：转型。5s轻松；
}
/*在链接上悬停的效果*/
.header链接：hover:：after{
transform:scaleX（1）；/*实际显示下的行，scaleX（1）而不是0*/
}
/*一些搜索栏描述和效果（概述）*/
.搜索栏{
位置：相对位置；
}
/*设置搜索栏内文本的样式*/
.searchbar输入[type=“text”]{
边界：0；
填充：0；
宽度：0px；
高度：35px；
边界半径：3px；
}
/*设置搜索栏图标的样式*/
.searchbar.icon{
位置：绝对位置；
排名：0；
右：0；
宽度：35px；/*设置宽度*/
高度：100%；/*100%高度*/
背景：无；
边界半径：3px；
颜色：黑色；
过渡：所有0.5s 0.3s轻松；
}
/*Span或实际图示符图标*/
.searchbar.icon span{
位置：绝对位置；
最高：50%；
左：50%；
转换：转换（-50%，-50%）；/*确保图标在框中*/
光标：指针；/*设置光标指向单击时的外观*/
}
/*单击图标时的效果*/
.searchbar.icon.active{
背景：米色；
转换：所有0.3s ease；/*所有表示图标的所有属性都将具有此效果*/
}
/*搜索时的效果*/
.searchbar输入[type=“text”]。活动{
宽度：250px；
填充：0 10px；
过渡：所有0.5s 0.2s缓解；/*同样，所有属性。所有设置效果持续时间完成，依此类推*/
}
/*对中并确保同一条线，固定导航杆*/
@介质（最小宽度：768px）{
#navbarNav.navbar-collapse.collapse{
显示：flex！重要；
对齐项目：居中；
边缘顶部：15px；
弹性基础：自动！重要；
左侧填充：0；
}
.navbar切换程序{显示：无；}
.navbar品牌{填充：0！重要；}
}
ul li{页边距顶部：0；}
/*调整导航栏的大小、折叠时修复导航栏*
window.addEventListener('scroll', function(){
        let navHeader = document.querySelector('header');
        let windowPosition = window.scrollY > 0;
        navHeader.classList.toggle('scrolling-active', windowPosition)
    })