Secondary Fixed Navigation with Anchors to Sections

Question

I need to incorporate a secondary menu that shows up when scrolling. In the desktop version, the menu has links to the sections down below in the same page. Plus, it has a scroll to the top button.

The overall structure seems working, but the issue comes when I click on one of the anchors at the top. The "active" status remains to the previous element. Only if I am scrolling down a bit more, then the status changes. The problem is that in addition of changing to "active" when I am scrolling, it should also change when I click on an element and it's not that so accurate. Any ideas?

HTML for the menu and sections. In the first part you find the code for the scroll action, followed by the desktop menu. The id are then associated to the sections below.

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0" style="height:0px; width: 100%; overflow-y: scroll; position: relative;">
  <a id="scrollable">
          <span></span>
    </a>
</div>
<div id="navbar-kb">
  <div class="navbar-kb-wrapper">
    <nav class="d-navigation-desktop d-none d-lg-block">
        <div class="row d-navigation-row cyan px-0 gx-0">
          <div class="col-md-10 gx-0">
            <div class="row bg-branding">
                <div class="col-md-3">
                  <a href="http://bgdrupal.lndo.site/">
                    <img src="/themes/custom/buildinggreen/images/bg-small-logo.svg" alt="BuildingGreen - Championing the Changemakers in Sustainable Design & Building" class="d-block" width="100%">
                  </a>
                </div>
                <div class="col-md-6">
                  <p>Championing the Changemakers in Sustainable Design & Building</p>
                </div>
            </div>
            <div class="row">
              <div class="col-12">
                <ul>
                    <li class="list active">
                        <a href="#deep-dives">
                            Deep Dives
                        </a>
                    </li>
                    <li class="list">
                        <a href="#quick-takes">
                            Quick Takes
                        </a>
                    </li>
                    <li class="list">
                        <a href="#news">
                            In the News
                        </a>
                    </li>
                    <li class="list">
                        <a href="#perspectives">
                            Perspectives
                        </a>
                    </li>
                    <li class="list">
                        <a href="#resources">
                            Learning Resources
                        </a>
                    </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-2 gx-0">
            <a href="#scrollable" class="scroll-downs bg-top-cta cyan"><i class="fa-solid fa-angle-up"></i> <span>Back to top</span></a>
          </div>
        </div>
    </nav>
  </div>
</div>

<div class="sectionSelector" id="deep-dives">
    <p>Duis ac enim scelerisque, vulputate ligula in, auctor erat. Curabitur in augue justo. Aliquam imperdiet suscipit rutrum. Suspendisse potenti. Praesent volutpat placerat elit, vitae molestie lorem pharetra at. Vestibulum condimentum, diam id sodales finibus, nunc mi tempus turpis, a malesuada ex lorem quis sapien. Pellentesque congue tellus vitae tortor fermentum lobortis. Nam placerat tortor massa, ut vulputate velit cursus sed. Sed vel volutpat eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed non velit sit amet nibh commodo accumsan. Morbi non ornare arcu. Phasellus laoreet varius mi. Vestibulum accumsan, nunc ac luctus porttitor, tellus est gravida tortor, at bibendum risus eros ac lectus. Duis at imperdiet erat, eget iaculis dui.</p>

    <p>Aliquam volutpat fringilla arcu sed pellentesque. Duis sed elit volutpat, iaculis diam mattis, condimentum metus. Nam quis porttitor enim. Maecenas augue purus, iaculis et sem eget, pretium vulputate justo. Vestibulum at enim non arcu consequat pretium et eget massa. Fusce bibendum nulla vitae erat consequat, non luctus sapien tempus. Maecenas quis dui sit amet nulla posuere placerat quis vel tortor. Vestibulum ultrices orci vel gravida auctor. Proin in commodo metus. Donec a ipsum nec lectus finibus cursus non quis velit. Vestibulum sit amet tortor turpis. Mauris condimentum nisi erat, ut imperdiet quam elementum vitae. Nullam sollicitudin purus in tortor vestibulum dictum. Etiam consectetur elit vehicula augue mollis rutrum.</p>
</div>
<div class="sectionSelector" id="quick-takes">
    <p>Duis ac enim scelerisque, vulputate ligula in, auctor erat. Curabitur in augue justo. Aliquam imperdiet suscipit rutrum. Suspendisse potenti. Praesent volutpat placerat elit, vitae molestie lorem pharetra at. Vestibulum condimentum, diam id sodales finibus, nunc mi tempus turpis, a malesuada ex lorem quis sapien. Pellentesque congue tellus vitae tortor fermentum lobortis. Nam placerat tortor massa, ut vulputate velit cursus sed. Sed vel volutpat eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed non velit sit amet nibh commodo accumsan. Morbi non ornare arcu. Phasellus laoreet varius mi. Vestibulum accumsan, nunc ac luctus porttitor, tellus est gravida tortor, at bibendum risus eros ac lectus. Duis at imperdiet erat, eget iaculis dui.</p>

    <p>Aliquam volutpat fringilla arcu sed pellentesque. Duis sed elit volutpat, iaculis diam mattis, condimentum metus. Nam quis porttitor enim. Maecenas augue purus, iaculis et sem eget, pretium vulputate justo. Vestibulum at enim non arcu consequat pretium et eget massa. Fusce bibendum nulla vitae erat consequat, non luctus sapien tempus. Maecenas quis dui sit amet nulla posuere placerat quis vel tortor. Vestibulum ultrices orci vel gravida auctor. Proin in commodo metus. Donec a ipsum nec lectus finibus cursus non quis velit. Vestibulum sit amet tortor turpis. Mauris condimentum nisi erat, ut imperdiet quam elementum vitae. Nullam sollicitudin purus in tortor vestibulum dictum. Etiam consectetur elit vehicula augue mollis rutrum.</p>
</div>
<div class="sectionSelector" id="news">
    <p>Duis ac enim scelerisque, vulputate ligula in, auctor erat. Curabitur in augue justo. Aliquam imperdiet suscipit rutrum. Suspendisse potenti. Praesent volutpat placerat elit, vitae molestie lorem pharetra at. Vestibulum condimentum, diam id sodales finibus, nunc mi tempus turpis, a malesuada ex lorem quis sapien. Pellentesque congue tellus vitae tortor fermentum lobortis. Nam placerat tortor massa, ut vulputate velit cursus sed. Sed vel volutpat eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed non velit sit amet nibh commodo accumsan. Morbi non ornare arcu. Phasellus laoreet varius mi. Vestibulum accumsan, nunc ac luctus porttitor, tellus est gravida tortor, at bibendum risus eros ac lectus. Duis at imperdiet erat, eget iaculis dui.</p>

    <p>Aliquam volutpat fringilla arcu sed pellentesque. Duis sed elit volutpat, iaculis diam mattis, condimentum metus. Nam quis porttitor enim. Maecenas augue purus, iaculis et sem eget, pretium vulputate justo. Vestibulum at enim non arcu consequat pretium et eget massa. Fusce bibendum nulla vitae erat consequat, non luctus sapien tempus. Maecenas quis dui sit amet nulla posuere placerat quis vel tortor. Vestibulum ultrices orci vel gravida auctor. Proin in commodo metus. Donec a ipsum nec lectus finibus cursus non quis velit. Vestibulum sit amet tortor turpis. Mauris condimentum nisi erat, ut imperdiet quam elementum vitae. Nullam sollicitudin purus in tortor vestibulum dictum. Etiam consectetur elit vehicula augue mollis rutrum.</p>
</div>
<div class="sectionSelector" id="perspectives">
    <p>Duis ac enim scelerisque, vulputate ligula in, auctor erat. Curabitur in augue justo. Aliquam imperdiet suscipit rutrum. Suspendisse potenti. Praesent volutpat placerat elit, vitae molestie lorem pharetra at. Vestibulum condimentum, diam id sodales finibus, nunc mi tempus turpis, a malesuada ex lorem quis sapien. Pellentesque congue tellus vitae tortor fermentum lobortis. Nam placerat tortor massa, ut vulputate velit cursus sed. Sed vel volutpat eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed non velit sit amet nibh commodo accumsan. Morbi non ornare arcu. Phasellus laoreet varius mi. Vestibulum accumsan, nunc ac luctus porttitor, tellus est gravida tortor, at bibendum risus eros ac lectus. Duis at imperdiet erat, eget iaculis dui.</p>

    <p>Aliquam volutpat fringilla arcu sed pellentesque. Duis sed elit volutpat, iaculis diam mattis, condimentum metus. Nam quis porttitor enim. Maecenas augue purus, iaculis et sem eget, pretium vulputate justo. Vestibulum at enim non arcu consequat pretium et eget massa. Fusce bibendum nulla vitae erat consequat, non luctus sapien tempus. Maecenas quis dui sit amet nulla posuere placerat quis vel tortor. Vestibulum ultrices orci vel gravida auctor. Proin in commodo metus. Donec a ipsum nec lectus finibus cursus non quis velit. Vestibulum sit amet tortor turpis. Mauris condimentum nisi erat, ut imperdiet quam elementum vitae. Nullam sollicitudin purus in tortor vestibulum dictum. Etiam consectetur elit vehicula augue mollis rutrum.</p>
</div>
<div class="sectionSelector" id="resources">
    <p>Duis ac enim scelerisque, vulputate ligula in, auctor erat. Curabitur in augue justo. Aliquam imperdiet suscipit rutrum. Suspendisse potenti. Praesent volutpat placerat elit, vitae molestie lorem pharetra at. Vestibulum condimentum, diam id sodales finibus, nunc mi tempus turpis, a malesuada ex lorem quis sapien. Pellentesque congue tellus vitae tortor fermentum lobortis. Nam placerat tortor massa, ut vulputate velit cursus sed. Sed vel volutpat eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed non velit sit amet nibh commodo accumsan. Morbi non ornare arcu. Phasellus laoreet varius mi. Vestibulum accumsan, nunc ac luctus porttitor, tellus est gravida tortor, at bibendum risus eros ac lectus. Duis at imperdiet erat, eget iaculis dui.</p>

    <p>Aliquam volutpat fringilla arcu sed pellentesque. Duis sed elit volutpat, iaculis diam mattis, condimentum metus. Nam quis porttitor enim. Maecenas augue purus, iaculis et sem eget, pretium vulputate justo. Vestibulum at enim non arcu consequat pretium et eget massa. Fusce bibendum nulla vitae erat consequat, non luctus sapien tempus. Maecenas quis dui sit amet nulla posuere placerat quis vel tortor. Vestibulum ultrices orci vel gravida auctor. Proin in commodo metus. Donec a ipsum nec lectus finibus cursus non quis velit. Vestibulum sit amet tortor turpis. Mauris condimentum nisi erat, ut imperdiet quam elementum vitae. Nullam sollicitudin purus in tortor vestibulum dictum. Etiam consectetur elit vehicula augue mollis rutrum.</p>
</div>

/* Secondary Menu a the Scroll */
      $(window).bind('scroll', function () {
          if ($(window).scrollTop() > 50) {
              $('#navbar-kb').addClass('fixed');
          } else {
              $('#navbar-kb').removeClass('fixed');
          }
      });

      /* Secondary Navigation Links to Sections */

      let section = document.querySelectorAll('.sectionSelector');
      let lists = document.querySelectorAll('.list');
      function activeLink(li) {
            lists.forEach((item) => item.classList.remove('active'));
            li.classList.add('active');
      }
        lists.forEach((item) =>
            item.addEventListener('click', function(){
                activeLink(this);
            }));

        window.onscroll = () => {
            section.forEach(sec => {
                let top = window.scrollY;
                let offset = sec.offsetTop;
                let height = sec.offsetHeight;
                let id = sec.getAttribute('id');

                if (top >= offset && top < offset + height) {
                    const target = document.querySelector(`[href='#${id}']`).parentElement;
                    activeLink(target);
                }
            })
        };

      // Bootstrap Scroll 
      var scrollSpy = new bootstrap.ScrollSpy(document.body, {
        target: '#scrollable'
        
      })

Any Ideas and possible solutions?