title: Offset an anchor section for a fixed header
body: <p>I've seen other answers, but none of them seem to work for me.</p>
  
  <p>What I want: when I type the URL <code>.../page.html#two</code> to go to <code>#two</code>, but with a 50px offset from the top of the page.</p>
  
  <p><strong>note: ive added the <code>big space</code> and <code>&lt;a&gt;'s</code> because you can't type the url in jsfiddle. I want it to work with urls, as well as with links.</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;section id="one"&gt;First section&lt;/section&gt;
      &lt;section id="two"&gt;Second section&lt;/section&gt;
      &lt;section id="three"&gt;Third section&lt;/section&gt;
      &lt;div id="big_space"&gt;&lt;/div&gt;
      &lt;a href="#one"&gt;one&lt;/a&gt;
      &lt;a href="#two"&gt;two&lt;/a&gt;
      &lt;a href="#three"&gt;three&lt;/a&gt;
  &lt;/body&gt;
  
  body
  {
      height: 2000px;
  }
  
  #big_space
  {
      height: 1000px;
  }
  
  section
  {
      height: 100px;
      background-color: lightblue;
      margin-bottom: 5px;
  }
  </code></pre>
  
  <p>Here's a link to the JSfiddle: <a href="http://jsfiddle.net/hAmCL/" rel="nofollow">http://jsfiddle.net/hAmCL/</a></p>
  
  <p>I have tried using the <code>section:before</code> but it seems to give the wrong result (i've commented it out in jsfiddle)</p>