BootStrap ScrollSpy 添加/删除 class 到可见的部分

Question

我正在使用 BS ScrollSpy 并且想 add/remove 一个 class 到当前可见的每个部分。像 "active" 或 "in-view" 或类似的。这可能仅使用 BS JS 吗？

一次一个。

<section id="welcome" class="section-section">

<section id="welcome" class="section-section in-view">

Answer 1

我用这个创建了小片段，您可以将 .active class 添加到当前部分并从其他部分删除。

查看演示 HERE

HTML:

<!-- Navs to be spied and automatically change through navigation -->
<div id="navs">
  <ul class="nav nav-pills">
    <li role="presentation" class="active">
      <a href="#top">Top</a>
    </li>
    <li role="presentation">
      <a href="#middle">Middle</a>
    </li>
    <li role="presentation">
      <a href="#bottom">Bottom</a>
    </li>
  </ul>
</div>

<!-- The component "component-to-spy" is spying now "navs" -->
<div id="component-that-spies" data-spy="scroll" data-target="#navs">
  <!-- You can use any component you want. Try to use an <ul> for the bottom section instead of an <h4> -->
 <section id="top" class="section-section">
   <h4 >Top</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

   <section id="middle" class="section-section">
       <h4>Middle</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

  <section id="bottom" class="section-section">
    <h4 id="bottom">Bottom</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>


</div>

JS:

function scrollActive(currentId) {
  $('.section-section').removeClass('active');
  $(currentId).addClass('active');
}

$('.nav li').on('activate.bs.scrollspy', function(e) {
  var targetId = $(e.target).find('a').attr('href');
  scrollActive(targetId);

})

希望对你有帮助

BootStrap ScrollSpy 添加/删除 class 到可见的部分

BootStrap ScrollSpy add / remove class to the section that is in view

jquery

addclass

twitter-bootstrap

scrollspy