title: Offsetting Anchor Links with Fixed Header
body: <p>There've been a few similar posts (<a href="https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header">offsetting an html anchor to adjust for fixed header</a>, for example), but those solution doesn't work for my particular case.</p>
  
  <p>I am using jQuery to populate a Table of Contents, specifically the method described here: <a href="http://css-tricks.com/automatic-table-of-contents/" rel="noreferrer">http://css-tricks.com/automatic-table-of-contents/</a>. It searches for the h2 tags within the article, and then creates anchors links.</p>
  
  <p>The problem is I'm using a fixed header. When I click on one of these anchor links, the target h2 is <em>underneath</em> the header. One temporary solution I'm using is:</p>
  
  <pre><code>h2:target{
    padding-top:[header-height];
  }
  </code></pre>
  
  <p>This works until you scroll back up, and there's a huge gap in the middle of the content. Do y'all have any ideas on how I can offset these anchor links to account for the header? I'd like to keep the HTML as semantic as possible. Any help would be appreciated.</p>
  
  <p><strong>Here's a jsFiddle of what exactly I'm talking about: <a href="http://jsfiddle.net/aweber9/GbNFv/" rel="noreferrer">http://jsfiddle.net/aweber9/GbNFv/</a></strong></p>
  
  <p>Thanks.</p>