11486 sujets

JavaScript, DOM et API Web HTML5

Bug menu sidebar avec des ancres

Bonjour
j'ai un menu sidebar avec une position fixed, qui contient 4 liens, chaque lien pointe vers une section avec un ancre, quand le lien est en état active je lui accorde la classe "current". le problème c'est que si je passe du 4eme lien au 3eme lien, c'est l'etat du 2eme lien qui change et la classe "current" se rajoute a celui-ci.
html {
  scroll-behavior: smooth;
}

li a.current {
  letter-spacing: -.5px;
  font-size: 3.2rem;
  line-height: 3.8rem;
  font-weight: 500;
}

.bloc-decennie {
  min-height: 600px;
}

#sidebar-story {
position: fixed;
top: 0;
}

    let mainNavLinks = document.querySelectorAll("a.link-timeline");
    let mainSections = document.querySelectorAll("div.bloc-decennie");	

    let lastId;
    let cur = [];

    // passe to the observer
    const options = {
      root: document.getElementById('#all-story'), // The scroll area
      rootMargin: '0% 0% -80% 0%',
      threshold: 0
    }

    // The observer
    const observer = new IntersectionObserver((entries, observer) => {

      // Entries are all the items observed which have entered to the scroll area
      entries.forEach(entry => {
        // We only want the ones intersecting wuth our threshold
        if (entry.isIntersecting) {
          // map to the link
          let link = document.querySelector('[href="#'+entry.target.id+'"]');
          if (link) {
            // Remove current class from all links
            mainNavLinks.forEach(item => {
              item.classList.remove("current");
            });
            // Add current to new target
            link.classList.add("current");          
          }
        }
      })  
    }, options);

  // foreach section we send to the observer
  mainSections.forEach(target => {
    observer.observe(target);  
  });

<html>
  <header>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  </header>
  <body>
    <div class="">
      <div class="row">
        <div class="col-md-3 pb-5">
          <ul class="text-align-right no-list-style pl-8" id="sidebar-story">
            <li class="mb-5 cta-download"><a href="#decennie-1" class="link-timeline heading-small-regular">1977-1987</a></li>
            <li class="mb-5 cta-download"><a href="#decennie-2" class="link-timeline heading-small-regular">1988-1998</a></li>
            <li class="mb-5 cta-download"><a href="#decennie-3" class="link-timeline heading-small-regular">1999-2009</a></li>
            <li class="mb-5 cta-download"><a href="#decennie-4" class="link-timeline heading-small-regular">2010-2019</a></li>
          </ul>
        </div>
        <div class="col-md-4 pb-5" id="all-story">
          <div class="bloc-decennie row" id="decennie-1">
            <div class="col-12">
          11111<br>Cum asperiores temporibus itaque consequatur quod inventore, quia quis explicabo dicta esse minus voluptatem reiciendis eveniet animi, necessitatibus illum dolorem doloremque repellat placeat, dolores eaque.
            </div>
          </div>
          <div class="bloc-decennie row" id="decennie-2">
            <div class="col-12">
          2222<br>Cum asperiores temporibus itaque consequatur quod inventore, quia quis explicabo dicta esse minus voluptatem reiciendis eveniet animi, necessitatibus illum dolorem doloremque repellat placeat, dolores eaque.
            </div>
          </div>
          <div class="bloc-decennie row" id="decennie-3">
            <div class="col-12">
          33333<br>Cum asperiores temporibus itaque consequatur quod inventore, quia quis explicabo dicta esse minus voluptatem reiciendis eveniet animi, necessitatibus illum dolorem doloremque repellat placeat, dolores eaque.
            </div>
          </div>
          <div class="bloc-decennie row" id="decennie-4">
            <div class="col-12">
          44444<br>Cum asperiores temporibus itaque consequatur quod inventore, quia quis explicabo dicta esse minus voluptatem reiciendis eveniet animi, necessitatibus illum dolorem doloremque repellat placeat, dolores eaque.
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
Sujet clos
Aller à