BootStrap ScrollSpy보기에있는 섹션에 클래스 추가/제거

Question

BS ScrollSpy를 사용 중입니다. & 현재보기에있는 각 섹션에 클래스를 추가/제거하려고합니다. '활성'또는 '조회 있음'또는 이와 유사합니다. BS JS를 사용하면 가능합니까?

한 번에 하나씩.

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

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

Answer 1

난 당신이 현재 섹션에 .active 클래스를 추가하고 다른 섹션에서 제거 할 수 있습니다이와 함께 작은 조각을 만들었습니다.

확인 데모 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); 

}) 

나는 그것이