Search code examples
htmlcssbootstrap-4bootstrap-5scrollspy

Is it possible to use 2 scroll-spy methods using bootstrap 5 in a single web page?

I need 2 navs in my web page and also 2 set of nav-links. I want to keep the scroll-spy on both of my navs. Though only one nav will exist at a time. My problem is when second nav appear and first one disappear, the scroll-spy doesn't work. It's only working on the first nav. What can I do to keep the scroll-spy on the second nav too? Please help me..

<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>
Solution

  • I found a simple solution for this problem:

    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 part==========================

    .newColor {
    color: blue !important;
}