Javascript Bootstrap 4网站错误：使用自定义数据属性将类从节传递到导航栏不起作用

我在Bootstrap4中的一个网站上工作，该网站有浅色和深色背景的部分以及一个固定的导航栏

导航栏是黑色的（css类为

bg dark

），虽然在光线部分很容易看到，但在黑暗部分却无法区分

我找到了解决这个问题的简单方法：我使用自定义数据属性

data-navbar-classes

，其中一个值

navbar-light-bg-light

和

navbar-dark-bg-dark

将这两个类从一节传递到另一节，因为该节到达页面顶部

脚本中有一个bug，我找不到它：

var-toggleNavbarClasses=function（）{
var navbarHeight=$（'.navbar'）.outerHeight（），
classChangeTrigger=navbarHeight/2；
$（'.page section'）。每个（函数（）{
变量$pageSection=$（此），
pageSectionClasses=$pageSection.data（'navbar-classes'），
fromTop=$pageSection.offset（）.top；
if（fromTop=0）{
$（'nav.navbar'）.removeClass（'bg-dark-navbar-dark'））
.addClass（pageSectionClasses）；
}
});
};
$（窗口）。滚动（toggleNavbarClasses）；
//toggleNavbarClasses（）
。页面部分{
填充：70px 10px
}
.page-section.bg-dark*{
颜色：#fff；
}









第一节
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

第二节
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

Lorem ipsum dolor sit amet，奉献精英。这是一个非常好的工作机会，值得在sit、amet VERITIATIS、saepe itaque工作！Vilit vitae accusantium maiores腐蚀铜酸盐

第三节
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

如果我正确理解了您的问题，您应该找出导航栏位于哪个部分，然后确定它的
类别

但是在您的代码中，唯一满足
fromTop=0
的情况是第一个
页面部分，因为其他
fromTop
总是大于
classChangeTrigger

在这种情况下，您可以通过计算
outerHeight
和
offset（），简单地找出
navbar
位于哪个部分。页面部分的顶部和当前的
滚动顶部如下所示：


var-toggleNavbarClasses=function（）{
var navbarHeight=$（'.navbar'）.outerHeight（），
classChangeTrigger=navbarHeight/2；
$（'.page section'）。每个（函数（）{
变量$pageSection=$（此），
pageSectionClasses=$pageSection.data（'navbar-classes'），
fromTop=$pageSection.offset（）.top；
高度=$pageSection.outerHeight（）；
scrollTop=document.documentElement.scrollTop；
如果（scrollTop>=fromTop&&scrollTop