Javascript 使用jquery更改第n个子项上的导航链接颜色

我在jquery/css方面遇到了令人困惑的问题。我正试图让我的导航栏链接颜色从白色变为黑色，当“进入”新的第n个孩子时再变回来

因此，当检查第n个子项（3n+1）和（3n+2）时，链接需要是白色的，但是（3n+3），链接需要变为黑色，并在下一个循环中更改

我曾尝试重用一个脚本来添加类，但它一直在添加.white和.black，直到我返回顶部

我该如何解决这个问题

$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
var objectSelect=$（“.col-4:n子级（3n+1）”；
var objectPosition=objectSelect.offset（）.top；
如果（滚动>对象位置）{
$（“.navbar a”）.addClass（“白色”）；
}否则{
$（“.navbar a”）.removeClass（“白色”）；
}
});
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
var objectSelect=$（“.col-4:n子级（3n+2）”；
var objectPosition=objectSelect.offset（）.top；
如果（滚动>对象位置）{
$（“.navbar a”）.addClass（“白色”）；
}否则{
$（“.navbar a”）.removeClass（“白色”）；
}
});
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
var objectSelect=$（“.col-4:n子级（3n+3）”；
var objectPosition=objectSelect.offset（）.top；
如果（滚动>对象位置）{
$（“.navbar a”）.addClass（“黑色”）；
}否则{
$（“.navbar a”）.removeClass（“黑色”）；
}
});
html{
身高：100%；
字号：21px；
}
身体{
边际：0px；
字体系列：“卡拉”，无衬线；
宽度：100%；
身高：100%；
颜色：白色；
}
* {
框大小：边框框；
}
/*设计*/
.行：：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
.col-1{
宽度：25%；
}
.col-2{
宽度：50%；
}
上校3{
宽度：75%；
}
.col-4{
宽度：100%；
右：20vw；
左：20vw；
}
[类别*=“列-”]{
浮动：左；
高度：90vh；
右：20vw；
左：20vw；
填充顶部：25vh；
垫底：15vh；
背景附件：滚动条；
}
[类*=“列-”]：第n个子项（3n+1）{
/*使用的图像*/
背景图片：url（“img/bg2.jpg”）；
/*全高*/
身高：100%；
/*创建视差滚动效果*/
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
[类*=“列-”]：第n个子项（3n+2）{
背景色：rgb（238114,3）；
}
[类*=“列-”]：第n个子项（3n+3）{
背景色：白色；
颜色：黑色；
}
布莱克先生{
颜色：黑色！重要；
}
怀特先生{
颜色：白色！重要；
}
/*航行*/
navbar先生{
溢出：隐藏；
背景色：透明；
位置：固定；
/*将导航栏设置为固定位置*/
排名前5名；
/*将导航栏定位在页面顶部*/
宽度：100%；
/*全宽*/
字体大小：25px；
字体大小：粗体；
线高：1.5em；
}
纳瓦尔先生{
浮动：对；
显示：块；
颜色：#F2F2；
背景色：透明；
文本对齐：居中；
利润率：20px；
左侧填充：25px；
右边填充：25px；
文字装饰：无；
}
.导航栏a:悬停{
边框底部：1px实心；
}
@媒体屏幕和屏幕（最大宽度：1180px）{
纳瓦尔先生{
字体大小：16px；
左侧填充：0px；
右边填充：0px；
}
}
@媒体屏幕和屏幕（最大宽度：700px）{
纳瓦尔先生{
显示：无！重要；
}
}

这是什么？
广告
关于
接触
向下滚动时，不会删除类。你只是在添加它。
最后一个类是控制颜色的类

所以。您正在添加
黑色
，然后添加
白色
。在那之后，再加上黑色就没用了。还有

class="black white"

删除每个部分后的最后一个类应该可以解决您的问题。
jQuery也有
hasClass（className）