title: Scrolling to anchor and make nav fixed
body: <p>I'm trying to make a nav with anchor links fixed when scrolling to an anchor. 
  Making things fixed an scroll to an anchor is not the problem. </p>
  
  <p>The problem is that my nav is almost on the bottom of the screen. So what happens if you scroll down the nav gets a <code>fixed</code> class. When then clicking an anchor link the script scrolls to far to the anchor block. I tried offsetting the nav to the height of the navigation. That works but only when you click a second time on the same link. First time clicking an anchor link still makes the link scroll too far!</p>
  
  <p><strong>I created a Fiddle to explain what happens -> <a href="http://jsfiddle.net/meules/wcmoLe5j/2/" rel="nofollow">Fiddle</a></strong></p>
  
  <p>I personally think that the scrollTo and making the nav fixed at the same time is interfering with each other.</p>
  
  <p>Does anybody know what can cause this?</p>
  
  <p>What I have is this:</p>
  
  <pre><code>&lt;div class="anchor-links"&gt;
      &lt;div class="anchor-wrapper"&gt;
          &lt;ul class="nav-list"&gt;
              &lt;li&gt;&lt;a href="#description" class="goSmoothly"&gt;Product information&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#bundles" class="goSmoothly"&gt;Product bundles&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#reviews" class="goSmoothly"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#related" class="goSmoothly"&gt;Related products&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="description" class="block"&gt;description&lt;/div&gt;
  &lt;div id="bundles" class="block"&gt;bundles&lt;/div&gt;
  &lt;div id="reviews" class="block"&gt;reviews&lt;/div&gt;
  &lt;div id="related" class="block"&gt;related&lt;/div&gt;
  
  var fixmeTop = $('.anchor-links').offset().top;
  
  $(window).scroll(function() {
      var currentScroll = $(window).scrollTop();
      if (currentScroll &gt;= fixmeTop){
          $('.anchor-links').addClass("sticky");
      } else {
          $('.anchor-links').removeClass("sticky");
      }
  });
  
  $('.goSmoothly').click(function(event){     
      event.preventDefault();
      $(this).addClass('active');
      $('html,body').animate({
          scrollTop: $(this.hash).offset().top - 100
      }, 500);
  });
  </code></pre>