title: Current section not being highlighted correctly in nav when scrolling
body: <p>I am creating a long page which has a navigation with anchor links. As you scroll down the page, the corresponding link in the nav will be highlighted to match the section you are on. </p>
  
  <p>It works fine, however I also have a section on the page which does not have an anchor link in the nav. The trouble is, by adding this section, it ruins my section order, which ruins the correct selected state. </p>
  
  <p>Here is a codepen to show you an example. <a href="http://codepen.io/anon/pen/jEdKBp" rel="nofollow">http://codepen.io/anon/pen/jEdKBp</a> - Notice as you scroll down to the 'new section', the 'claims' link in the nav is highlighted, which is wrong!</p>
  
  <p>What do I need to do so that only the current link is highlighted?</p>
  
  <p>Here is my code...</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;nav id="prod-menu"&gt;
    &lt;div class="wrapper"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#claims"&gt;Claims&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#guides"&gt;Guides&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#reviews"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#faq"&gt;FAQs&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt; 
  
  
  &lt;section class="prod-hero"&gt;&lt;/section&gt;
  
  &lt;div class="wrapper"&gt;
  
      &lt;section class="tile js-panel pad0"&gt;        
  
          &lt;section id="features" class="prod-panels"&gt; 
              &lt;h2&gt;Features&lt;/h2&gt;
          &lt;/section&gt;
  
    &lt;section class="prod-panels"&gt; 
              &lt;h2&gt;New section&lt;/h2&gt;
      &lt;p&gt;I do not want this section to appear in the nav&lt;/p&gt;
          &lt;/section&gt;
  
          &lt;section id="claims" class="prod-panels"&gt;   
              &lt;h2&gt;Claims&lt;/h2&gt;
          &lt;/section&gt;
  
          &lt;section id="guides" class="prod-panels"&gt;   
              &lt;h2&gt;Guides&lt;/h2&gt;
          &lt;/section&gt;
  
          &lt;section id="reviews" class="prod-panels"&gt;  
              &lt;h2&gt;Reviews&lt;/h2&gt;
          &lt;/section&gt;
  
          &lt;section id="faq" class="prod-panels"&gt;  
              &lt;h2&gt;FAQs&lt;/h2&gt;
          &lt;/section&gt;
  
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>var homeH = $( window ).height(),
      pH = [];
  pH.push("0"); 
  
  // create array with panel heights
  for (var s=1; s&lt;5; s++) { 
    var po = $(".js-panel section:nth-child("+s+")").position();
    pH.push( Math.round(po.top) );
  };
  
  $( window ).scroll(function() {      
  
    // toggle top menu selection
    for (var i=0;i&lt;6;i++) {
      if ( $( window ).scrollTop() &gt; pH[i]+900 ) { 
        $("#prod-menu ul li").removeClass("sel");
        $("#prod-menu ul li:nth-child("+(i+1)+")").addClass("sel");
       }
    };
  
  });
  </code></pre>