title: change underline of active nav by section
body: <p>So i had two problems but solved the first. The first was getting a nav bar to be sticky after a given div (or in this case the height of the div). Anyway the problem I have now is how can i get the nav links to be underlined or change color when on the active section. ie if I am on the first section the first link on the nav bar is underlined and when I scroll down the same happens for the respective links and sections.</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
      $(window).scroll(function () { 
        if ($(window).scrollTop() &gt; 550) {
          $('#nav_bar').addClass('navbar-fixed');
        }
        if ($(window).scrollTop() &lt; 551) {
          $('#nav_bar').removeClass('navbar-fixed');
        }
      });
    });
  &lt;/script&gt;
  
  &lt;div id="page"&gt;
    &lt;!--top section--&gt;
    &lt;section id="first"&gt;
      &lt;div class="top headline"&gt;&lt;img src="" alt="Logo"&gt;&lt;/div&gt;
      &lt;div class="top-with"&gt;with&lt;/div&gt;
      &lt;div class="max-top"&gt;&lt;img src="" alt="Logo"&gt;&lt;/div&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  
  &lt;!-- fixed nav-bar --&gt;
  &lt;div id='nav_wrapper'&gt;
    &lt;nav id='nav_bar'&gt;
      &lt;ul id='nav_links'&gt;
        &lt;img src="" alt="max-logo"&gt; 
        &lt;li class="active"&gt;
          &lt;li&gt;&lt;a href="#first"&gt;1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#second"&gt;2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#third"&gt;3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#fourth"&gt;4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#fifth"&gt;5&lt;/a&gt;&lt;/li&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>