Scrollspy

<nav id="spy-barre" class="navbar bg-body-tertiary px-3 mb-2" aria-label="Sommaire du guide">
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#spy-ouverture">Ouverture</a></li>
    <li class="nav-item"><a class="nav-link" href="#spy-frais">Frais</a></li>
    <li class="nav-item"><a class="nav-link" href="#spy-cartes">Cartes</a></li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#spy-barre" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="border rounded p-3 overflow-auto" style="height: 200px;" tabindex="0">
  <h4 id="spy-ouverture">Ouverture de compte</h4>
  <p>Présentez une pièce d'identité en cours de validité, un justificatif de domicile de moins de trois mois et un dépôt initial de 10 000 FCFA. Votre conseiller vous remet ensuite votre RIB et vos identifiants.</p>
  <p>Le compte est actif dès la validation de votre dossier, en général sous 48 heures ouvrées.</p>
  <h4 id="spy-frais">Frais de tenue de compte</h4>
  <p>Les frais de tenue de compte sont de 1 500 FCFA par mois. Ils sont prélevés le dernier jour ouvré du mois et figurent sur votre relevé.</p>
  <p>Les virements entre comptes BDU CI sont gratuits, quel que soit le montant.</p>
  <h4 id="spy-cartes">Cartes bancaires</h4>
  <p>La carte Visa Classic est livrée en agence sous cinq jours. Le plafond de retrait est de 500 000 FCFA par jour.</p>
  <p>En cas de perte ou de vol, faites opposition immédiatement auprès de votre agence ou par téléphone.</p>
</div>

<div class="row g-3">
  <div class="col-4">
    <div id="spy-liste" class="list-group">
      <a class="list-group-item list-group-item-action" href="#spy-liste-epargne">Épargne</a>
      <a class="list-group-item list-group-item-action" href="#spy-liste-credit">Crédit</a>
      <a class="list-group-item list-group-item-action" href="#spy-liste-assurance">Assurance</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#spy-liste" data-bs-smooth-scroll="true" class="border rounded p-3 overflow-auto" style="height: 180px;" tabindex="0">
      <h4 id="spy-liste-epargne">Épargne</h4>
      <p>Le livret rémunéré à 3,5 % par an accepte des versements libres dès 5 000 FCFA. Les retraits restent possibles à tout moment, sans pénalité.</p>
      <h4 id="spy-liste-credit">Crédit</h4>
      <p>Le prêt personnel finance vos projets jusqu'à 10 000 000 FCFA, sur 12 à 60 mois, avec des mensualités constantes.</p>
      <h4 id="spy-liste-assurance">Assurance</h4>
      <p>L'assurance emprunteur protège vos proches en cas de décès ou d'invalidité pendant la durée du prêt.</p>
    </div>
  </div>
</div>

<div class="row g-3">
  <div class="col-4">
    <nav id="spy-imbrique" class="nav nav-pills flex-column" aria-label="Sommaire détaillé">
      <a class="nav-link" href="#spy-imbrique-comptes">Comptes</a>
      <nav class="nav nav-pills flex-column ms-3">
        <a class="nav-link" href="#spy-imbrique-courant">Courant</a>
        <a class="nav-link" href="#spy-imbrique-epargne">Épargne</a>
      </nav>
      <a class="nav-link" href="#spy-imbrique-cartes">Cartes</a>
    </nav>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#spy-imbrique" class="border rounded p-3 overflow-auto" style="height: 220px;" tabindex="0">
      <h4 id="spy-imbrique-comptes">Comptes</h4>
      <p>Choisissez le compte qui correspond à votre usage : dépenses quotidiennes ou mise de côté.</p>
      <h5 id="spy-imbrique-courant">Compte courant</h5>
      <p>Il reçoit votre salaire et sert aux paiements, retraits et virements du quotidien.</p>
      <h5 id="spy-imbrique-epargne">Compte épargne</h5>
      <p>Il rémunère vos économies et peut être alimenté par un virement permanent mensuel.</p>
      <h4 id="spy-imbrique-cartes">Cartes</h4>
      <p>Cartes de retrait, de paiement ou prépayées : chaque carte a son plafond et son tarif.</p>
    </div>
  </div>
</div>

const spy = new bootstrap.ScrollSpy(document.body, {
  target: '#sommaire',
  rootMargin: '0px 0px -25%',
  smoothScroll: true,
});

// Après avoir ajouté des sections dans la page
spy.refresh();

document.addEventListener('activate.bs.scrollspy', (evenement) => {
  console.log('Lien actif : ' + evenement.relatedTarget.textContent);
});

// Sass : lien actif vert
$nav-pills-link-active-bg: $success;
$list-group-active-bg: $success;

// CSS : décalage des ancres sous une barre fixe de 4 rem
[data-bs-spy="scroll"] [id] {
  scroll-margin-top: 4rem;
}