title: Single page navigation menu - active indicator
body: <p>I'm trying to update the navigation for a single page website using jQuery waypoints. </p>
  
  <p>I want to update the navigation based on the current section in view. It works fine when going down using the navigation links. My problem is when you try to scroll to a section above the current section in view the active anchor is one below where it should be. </p>
  
  <p>Please see my <a href="http://jsfiddle.net/SJkmh/1/" rel="nofollow">Demo</a>.</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).ready(function(){
          $('section').waypoint(function(direction) {
            thisId = $(this).attr('id');
            $('ul li').each(function(){
              var secondaryID = $(this).attr('class');
              if  ( secondaryID == thisId )
                  {
                      $('ul li').removeClass('active');
                      $(this).addClass('active');
                  }
              });
      },{offset: '0'});   
  }); 
  $('a[href*=#]:not([href=#])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
          || 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
              }, 500);
              return false;
          }
      }
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="test"&gt;&lt;a href="#test"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="test2"&gt;&lt;a href="#test2"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="test3"&gt;&lt;a href="#test3"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="test4"&gt;&lt;a href="#test4"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="test5"&gt;&lt;a href="#test5"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;section id="test"&gt;&lt;/section&gt;
  &lt;section id="test2"&gt;&lt;/section&gt;
  &lt;section id="test3"&gt;&lt;/section&gt;
  &lt;section id="test4"&gt;&lt;/section&gt;
  &lt;section id="test5"&gt;&lt;/section&gt;
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>I got this to work using two waypoint functions with different offsets but this is clearly not the best solution. </p>
  
  <p><a href="http://jsfiddle.net/SJkmh/10/" rel="nofollow">http://jsfiddle.net/SJkmh/10/</a></p>
  
  <p>I trying to find a way of specifying offsets from within the same function (depending on direction), I used a variable for offset with values of (1 &amp; -1), but unfortunately it only uses +1.</p>
  
  <p><a href="http://jsfiddle.net/SJkmh/13/" rel="nofollow">http://jsfiddle.net/SJkmh/13/</a></p>