Javascript 更改固定导航栏'；s类，具体取决于其悬停的页面部分的背景

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

导航栏是黑色的（css类为

bg dark

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

我已尝试在用户到达黑暗部分时，将导航栏的

navbar-dark-bg-dark

更改为

navbar-light-bg-light

（StackOverflow上建议使用）：

$（window）.on（'activate.bs.scrollspy'，函数（e，obj）{
if（（window.innerHeight+window.pageYOffset）>=document.body.offsetHeight）{
返回；
}
var isBGLight=$（obj.relatedTarget）.hasClass（'bg-light'）；
$（'.navbar'）.toggleClass（'navbar-dark-bg-dark'，isBGLight）
.toggleClass（'navbar-light背景灯'，！isBGLight）；
});
。页面部分{
填充：70px 10px
}
.page-section.bg-dark*{
颜色：#fff；
}









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

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

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

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

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

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

我想我应该更容易正确利用引导scrollspy的“activate.bs.scrollspy”事件，而不是“破坏其规则”，并简单地用javascript代码覆盖默认的href导航

因此，我建议您将id添加回div，并将匹配的框架HREF添加回锚点，让引导程序通过obj.relatedTarget属性在“activate.bs.scrollspy”事件中为您提供目标，根据需要切换类，并可选地删除“activated”从导航项目中初始化，使其看起来不像是相关的部分。如果您有其他部分，请尝试使用隐藏锚或隐藏导航

当然，在我看来，最干净的方法是抛弃scrollspy，使用window.scrollY和$（window.on（'scroll'，…）。

请查看代码段：


$（window）.on（'activate.bs.scrollspy'，函数（e，obj）{
if（（window.innerHeight+window.pageYOffset）>=document.body.offsetHeight）{
返回；
}
var isBGLight=$（obj.relatedTarget）.hasClass（'bg-light'）；
$（'.navbar'）.toggleClass（'navbar-dark-bg-dark'，isBGLight）
.toggleClass（'navbar-light背景灯'，！isBGLight）；
//可选：从锚点中删除活动类，使其看起来不像nav链接到节
$（'.navbar nav a[href=“'+obj.relatedTarget+'”）.removeClass（'active'）；
});
//这里我们做实际的导航
$（'.navbar导航a'）。单击（函数（e）{
//防止锚点在导航到另一页之前短暂跳转到给定节的默认行为
e、 预防默认值（）；
//删除前导“#”的子字符串
window.location.href=$（e.target.attr（'href'）.substring（1）+'.html'；
})
。页面部分{
填充：70px 10px
}
.page-section.bg-dark*{
颜色：#fff；
}









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

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

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

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

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

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

“我的导航栏项目指向网站的其他页面，而不是当前页面的部分”这不是scrollspy的目的。。。它仅适用于同一页面上的锚定部分。因此，如果您链接到其他页面。@Themes.guide我正在尝试匹配背景颜色，那么您的问题“根据导航栏悬停的页面部分的背景更改导航栏的类”对我来说毫无意义。这就是我的目标，我不喜欢scroll spy。我只是描述了我为实现目标所做的努力。我的情况不同：链接指向其他页面；教派