title: jquery scroll, change navigation active class as the page is scrolling, relative to sections
body: <p><a href="http://jsfiddle.net/motocomdigital/gUWdJ/" rel="noreferrer">http://jsfiddle.net/motocomdigital/gUWdJ/</a></p>
  
  <p><br /></p>
  
  <p>I'm after a jquery scroll technique please that I would like to adapt to my project.</p>
  
  <p>Please see my project example as a fiddle here <a href="http://jsfiddle.net/motocomdigital/gUWdJ/" rel="noreferrer">http://jsfiddle.net/motocomdigital/gUWdJ/</a></p>
  
  <p>Currently you can see that my nav links automatically animates the scrolling relative to the <code>&lt;section&gt;</code>'s.</p>
  
  <p>My question is, using the <code>$(window).scroll</code> method, how can I add a <code>.active</code> class to my <code>nav a</code> when the sections reach the top of the window?</p>
  
  <p>So for example if the user scrolls down the page (instead of the navigation links), I want the active class to be added relative navigation link. Indicating where you are on the page.</p>
  
  <p><em>The active class will have to be removed then added every time I'm guessing as the user scrolls down the page.</em></p>
  
  <p>Also you will have to account for the 28px height of the fixed navigation bar, offset top window.</p>
  
  <p><br /></p>
  
  <p>Can anyone please show me a technique that I can try and use or adapt, or perhaps show me using my jsfiddle :)</p>
  
  <p><br /></p>
  
  <p>Any help would be much appreciated, thanks in advance!</p>
  
  <p><br /></p>
  
  <p><a href="http://jsfiddle.net/motocomdigital/gUWdJ/" rel="noreferrer">http://jsfiddle.net/motocomdigital/gUWdJ/</a></p>
  
  <p><br /></p>
  
  <p><img src="https://i.stack.imgur.com/Wj5ES.png" alt="enter image description here"></p>