在其他div上滾動時更改bootstrap導航類

我試圖爲我的fcc項目製作一個小組合。我希望我的導航鏈接在目標div處於焦點時改變那裏的活動類。我在這個代碼中使用引導程序 Here is my codepen link。請幫助在其他div上滾動時更改bootstrap導航類

<div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right link"> 
     <li><a href="#about" class="links">About</a></li> 
     <li><a href="#" class="links">Works</a></li> 
     <li><a href="#" class="links">Contacts</a></li> 
     </ul> 
    </div><!--/.nav-collapse -->

我的jQuery的

$(document).ready(function() { 
$('a[href*="#"]:not([href="#"])').click(function() { 
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
    var target = $(this.hash); 
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
    if (target.length) { 
    $('html, body').animate({ 
     scrollTop: target.offset().top 
    }, 1000); 
    return false; 
    } 
} 
});/* end of clickto scroll function */ 



var scroll_start = 0; 
var startchange = $('#button-down'); 
var offset = startchange.offset(); 
if (startchange.length){ 
$(document).scroll(function() { 
    scroll_start = $(this).scrollTop(); 
    if(scroll_start > offset.top) { 
     $(".navbar").css('background-color', '#333'); 

    } else { 
     $('.navbar').css('background-color', 'transparent'); 
    } 
    }); 
} 
});

來源

2016-10-21 John Mark Victorino

搜索bootstrap文檔它有一個插件正是你需要的http://getbootstrap.com/javascript/#affix – madalinivascu