title: Change bootstrap navigation class when scroll on other div
body: <p>Im trying to make a little portfolio for my fcc project.
  i want my nav links change there active class when the the target div is in focus.
  i use bootstrap in this code
  <a href="https://codepen.io/kuyaMacoy/pen/KgAoNX" rel="nofollow">Here is my codepen link</a> . please help</p>
  
  <pre><code>&lt;div id="navbar" class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav navbar-right link"&gt;
          &lt;li&gt;&lt;a href="#about" class="links"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="links"&gt;Works&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="links"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
  </code></pre>
  
  <p>And my Jquery</p>
  
  <pre><code>$(document).ready(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; 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 &gt; offset.top) {
        $(".navbar").css('background-color', '#333');
  
     } else {
        $('.navbar').css('background-color', 'transparent');
     }
    });
   }
  });
  </code></pre>