Agency template - bug 1st anchor link remains active

Bug Reports
1

How to reproduce:

  1. Open the template Agency
  2. Set to Bootstrap 5.2 (default)
  3. Open Preview
  4. Click any other anchor link than the 1st (= SERVICES)
  5. Notice how SERVICES remains active (yellow), altho it should turn yellow off for SERVICES and turn yellow on for the anchor link you clicked.

Example, where I’ve clicked on About:

image
image1148×946 118 KB

2

This post may shed some light. I posted a link to a discussion on Github about Bootstrap 5.2 and scrollspy that you may want to read.

3

I see… So it’s a non-solved bug in Bootstrap 5.2 regarding Scrollspy. Bummer.
I’ve noticed when opening the template as Bootstrap 4.6 - all is fine indeed.

Since my project is already saved as Bootstrap 5.2, and appears to be locked, there’s no way to change it to back to Bootstrap 4.6.

Can I somehow copy/paste my original project in total into a new Bootstrap 4.6 Agency template?

4

@ferdesign

Je kunt je eigen scrollspy maken
Verwijder op de body-tag de attributen:
data-bs-spy="scroll"
data-bs-target="#mainNav"
data-bs-offset="54"
Voeg dit script toe aan een javascript-bestand

(function () {
  'use strict';
  // constants
  const sections = [...document.querySelectorAll('section[id]')];
  const menuLinks = [...document.querySelectorAll('.nav-item a')];
  const navoffset = document.getElementById('mainNav').clientHeight;
  const navToggle = document.querySelector('.navbar-toggler');
  // Scrollspy handler
  const scrollHandle = () => {
    const scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
    menuLinks.forEach((link) => link.classList.remove('active'));
    sections.forEach((section) => {
      const offset = section.offsetTop - navoffset;
      if (offset <= scrollPosition) {
        menuLinks.forEach((link) => link.classList.remove('active'));
        const target = document.querySelector(`a[href="#${section.id}"]`);
        if (!target.hash) return;
        target.classList.add('active');
        if (target.parentElement.classList.contains('dropdown-menu')) {
          target.parentElement.parentElement.firstChild.classList.add('active');
        }
        if (document.querySelector('#navbarResponsive').classList.contains('show')) navToggle.click();
      }
    });
  };

  // event listeners
  document.addEventListener('scroll', scrollHandle, false);
  document.addEventListener('resize', scrollHandle, false);
  document.addEventListener('readystatechange', scrollHandle, false);
})();

Nu heb je een scrollspy die werkt zoals het werkte voordat Bootstrap hun scrollspy veranderde in 5.2

1 Like
5

Thanks (dank je!) , ik ga dit vanavond proberen en laat het je weten wanneer het gelukt is :grinning:

6

@kuligaposten Works perfectly: https://onetagger.github.io
And easy workaround, thank to you :+1:

1 Like