时间戳

首页 > 解决方案 > 固定侧边栏上的错误，平滑滚动

javascript - 固定侧边栏上的错误，平滑滚动

问题描述

我有一个固定侧边栏，在内容 div 中可以平滑滚动，我在这个侧边栏中有 4 个链接，每个链接都指向一个带有锚点的部分，当单击链接时，它的状态会发生变化并采用“当前”类。如果我从第四个链接转到第三个链接，第二个链接的状态会发生变化的问题。

    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 {
  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;
}

@media (min-height: 300px) {
  #sidebar-story {
position: fixed;
top: 0;
  }
}
<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>

标签： javascripthtmlcssscrollsidebar

解决方案

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

推荐阅读