title: Navigation links change on scroll position (single page site)
body: <p>I'm new to jQuery and javascript. I'm trying to create a single page website. The navigation is fixed at the top. When at a new 'part' of the single page I want the navigation to show that and the part currently on to be highlighted in the navigation.</p>
  
  <p>I managed to somewhat do it with the scroll() but it only works if the variable 'top' is greater than 0. I know it is something probably really stupid I'm doing wrong but I'm new to this so I hope this doesn't bother you.</p>
  
  <p><a href="http://jsfiddle.net/mAPh6/" rel="nofollow">http://jsfiddle.net/mAPh6/</a></p>
  
  <pre><code>$(document).scroll( function() {
      var top = $(document).scrollTop();
  
      if ( 200 &gt; top &gt; 0 )
          $(".navLinkTop").css("border-bottom", "5px solid #fff568");
      else
          $(".navLinkTop").css("border-bottom", "none");
  
      if ( 400 &gt; top &gt; 200 )
          $(".navLinkAbout").css("border-bottom", "5px solid #fff568");
      else
          $(".navLinkAbout").css("border-bottom", "none");
  
      if ( 400 &gt; top &gt; 0 )
          $(".navLinkWork").css("border-bottom", "5px solid #fff568");
      else
          $(".navLinkWork").css("border-bottom", "none");
  
      if ( 400 &gt; top &gt; 0 )
          $(".navLinkContact").css("border-bottom", "5px solid #fff568");
      else
          $(".navLinkContact").css("border-bottom", "none");
  });
  </code></pre>