title: jQuery Waypoints Refresh with CSS Transition
body: <p>I'm using waypoints to toggle a class which creates a CSS transition based on an offset. This is css transition decreases the height of an element. I've tried using the refresh function to recalculate the DOM once each waypoint is passed, but I'm not sure I'm doing it right or maybe I'm slightly restricted here.</p>
  
  <p>You can view the site here:
  <a href="http://dev.rostylesalon.com/" rel="nofollow">http://dev.rostylesalon.com/</a></p>
  
  <pre><code>jQuery('#aboutwrap').waypoint( function() {
      jQuery('#aboutwrap .section-header').toggleClass('header-animate');
  $.waypoints('refresh');
  }, { offset: 300 });
  
  jQuery('#servicewrap').waypoint( function() {
      jQuery('#servicewrap .section-header').toggleClass('header-animate');
  $.waypoints('refresh');
  }, { offset: 300 });
  
  jQuery('#contactwrap').waypoint( function() {
      jQuery('#contactwrap .section-header').toggleClass('header-animate');
  $.waypoints('refresh');
  }, { offset: 300 });
  </code></pre>
  
  <p>Each section header above should toggle a class that increases/decreases it's height. I thought the 'refresh' would recalculate the DOM to accomodate for this, but that's not the case. And the waypoint/anchor point ends up higher than intended. If you move from one section to the next, no issue. But if you skip over a section using the nav you'll the section header ends up slightly higher than the top of the viewport.</p>