是否可以在单个网页中使用 bootstrap 5 使用 2 个滚动间谍方法？答案

【问题标题】：Is it possible to use 2 scroll-spy methods using bootstrap 5 in a single web page?是否可以在单个网页中使用 bootstrap 5 使用 2 个滚动间谍方法？
【发布时间】：2021-06-04 20:52:52
【问题描述】：

我的网页中需要 2 个导航，还需要 2 组导航链接。我想在我的两个导航上保留滚动间谍。虽然一次只存在一个导航。我的问题是当第二个导航出现而第一个消失时，滚动间谍不起作用。它只适用于第一个导航。我该怎么做才能将滚动间谍也保留在第二个导航上？请帮帮我..

<body data-bs-spy="scroll" data-bs-target="#spy">
  <nav id="spy"> <!----in the samll screen size this nav gonna hide------>
    <div class="nav-pills">
      <a href="#home" class="nav-links">Home</a>
      <a href="#" class="nav-links"></a>
      <a href="#" class="nav-links"></a>
    </div>
  </nav>
  <nav id="spy"> <!----in the samll screen size this nav gonna appear------>
    <div class="nav-pills">
      <a href="#home" class="nav-links">Home</a>
      <a href="#" class="nav-links"></a>
      <a href="#" class="nav-links"></a>
    </div>
  </nav>
  <main data-bs-spy="scroll" data-bs-target="#spy" data-bs-offset="0" tabindex="0">
    <section id="home" class="section-part">
      ..................
    </section>
  </main>
</body>

【问题讨论】：

标签： html css bootstrap-4 bootstrap-5 scrollspy

【解决方案1】：

我为这个问题找到了一个简单的解决方案：

window.onscroll = function(){mainNav()};
var navLinks = document.getElementsByClassName("nav-link");
var points = document.getElementsByClassName('section-part');
function mainNav() {
    if ((window.pageYOffset < points[1].offsetTop)) {
        navLinks[0].classList.add("newColor");
        navLinks[7].classList.add("newColor");
    }
    else {
        navLinks[0].classList.remove("newColor");
        navLinks[7].classList.remove("newColor");
    }
    if ((window.pageYOffset >= points[1].offsetTop)&&(window.pageYOffset < points[2].offsetTop)) {
        navLinks[1].classList.add("newColor");
        navLinks[8].classList.add("newColor");
    }
    else {
        navLinks[1].classList.remove("newColor");
        navLinks[8].classList.remove("newColor");
    }
    if ((window.pageYOffset >= points[2].offsetTop)&&(window.pageYOffset < points[3].offsetTop)) {
        navLinks[2].classList.add("newColor");
        navLinks[9].classList.add("newColor");
    }
    else {
        navLinks[2].classList.remove("newColor");
        navLinks[9].classList.remove("newColor");
    }
    if ((window.pageYOffset >= points[3].offsetTop)&&(window.pageYOffset < points[4].offsetTop)) {
        navLinks[3].classList.add("newColor");
        navLinks[10].classList.add("newColor");
    }
    else {
        navLinks[3].classList.remove("newColor");
        navLinks[10].classList.remove("newColor");
    }
    if ((window.pageYOffset >= points[4].offsetTop)&&(window.pageYOffset < points[5].offsetTop)) {
        navLinks[4].classList.add("newColor");
        navLinks[11].classList.add("newColor");
    }
    else {
        navLinks[4].classList.remove("newColor");
        navLinks[11].classList.remove("newColor");
    }
    if ((window.pageYOffset >= points[5].offsetTop)&&(window.pageYOffset < points[6].offsetTop)) {
        navLinks[5].classList.add("newColor");
        navLinks[12].classList.add("newColor");
    }
    else {
        navLinks[5].classList.remove("newColor");
        navLinks[12].classList.remove("newColor");
    }
    if ((window.pageYOffset >= points[6].offsetTop)) {
        navLinks[6].classList.add("newColor");
        navLinks[13].classList.add("newColor");
    }
    else {
        navLinks[6].classList.remove("newColor");
        navLinks[13].classList.remove("newColor");
    }
}

=========================css部分==================== ======

.newColor {
    color: blue !important;
}

【讨论】：