滚动吸附到其他部分后，先前活动链接的颜色变为 Bootstrap 的导航栏悬停颜色

问题描述

我正在使用 Bootstrap 4 提供的导航栏，并开始通过使用 Intersection Observer 突出显示其链接，因为我还应用了一些 scroll-snap 在我的 CSS - reference img1 中。

我这样做是为了每当我单击一个链接并使其变为活动状态时，然后我将快照滚动到其他部分，它会使它们的链接变为活动状态，同时还删除前一个的 ".active" 类。

问题是之前活动链接的颜色变成了我为 $navbar-light-hover-color 设置的颜色，但我希望它只是非活动颜色 - {{ 3}}。

这只发生在我点击然后滚动捕捉时，当我点击链接而不滚动捕捉时一切正常。

我怀疑这是我的 JS，因为我已经检查了 DOM 更新，所以我怀疑是引导程序导致了问题。

有没有办法阻止我的链接获得我设置的导航栏悬停颜色？

顺便说一句，当我点击我网站的任何其他部分时，悬停颜色会消失，如图 reference img2。

我正在使用的脚本：

$(document).ready(function() {
    
  // smooth scrolling
  $(".navbar a").click(function(e) {
    e.preventDefault();
    
    document.querySelector(this.hash).scrollIntoView({
      behavior: "smooth" 
    });
  });
    
  // link highlighting
  const linkOne = document.querySelector(".home-link");
  const linkTwo = document.querySelector(".products-link");
  const sectionOne = document.querySelector(".home");
  const sectionOneOptions = {rootMargin: "-200px 0px 0px 0px"};
  const sectionOneObserver = new IntersectionObserver(function(entries,sectionOneObserver) {
    entries.forEach(entry => {
      if (!entry.isIntersecting) {
        linkOne.classList.remove("active");
        linkTwo.classList.add("active");
        document.querySelector(".navbar").classList.add("navbar-shadow");
      }
        
      else {
        linkOne.classList.add("active");
        linkTwo.classList.remove("active");
        document.querySelector(".navbar").classList.remove("navbar-shadow");
      }
    });
  },sectionOneOptions);

  sectionOneObserver.observe(sectionOne);
});

滚动捕捉：

body,html {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 89.8px; // height of my navbar
}
    
section {
  scroll-snap-align: start;
}

为我的导航栏编辑 Bootstrap 变量：

$navbar-light-hover-color: rgba($yellow,.7);
$navbar-light-active-color: rgba($yellow,.9);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）