是否可以在单个网页中使用引导程序 5 使用 2 种滚动间谍方法？

编程问答 2022-04-29

问题描述

我的网页中需要 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>

解决方法

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

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;
}
bootstrap-4bootstrap-5html