title: Data-scroll and data-anchor — active class is off
body: <p>I'm developing two sites, <a href="http://www.fredrixdesign.com" rel="nofollow noreferrer">Fredrix Design</a> and <a href="http://bosted.fredrixdesign.com" rel="nofollow noreferrer">Bosted System</a>, where I use the exact same "one page"-system files and code that I got from <a href="https://stackoverflow.com/a/14161592/1329669">another question</a> on Stack Overflow.</p>
  
  <p>On Fredrix Design it works perfectly — the navigation menu slides the user to whatever <code>&lt;section data-anchor="example"&gt;</code> he/she clicks on via <code>&lt;a data-scroll="example"&gt;</code>. However it doesn't work the same way on the Bosted System website. The sliding mechanism works smoothly as it should, but the <code>active</code> class is off by 20 pixels or so. It doesn't change exactly when I arrive at a different <code>&lt;section&gt;</code> — it changes when I've entered it.</p>
  
  <p><a href="http://jsfiddle.net/gUWdJ/3/" rel="nofollow noreferrer">SEE DEMO</a></p>
  
  <p>supplied/made by <a href="https://stackoverflow.com/users/1414562/roasted">@roasted</a> in the other question mentioned above.</p>