title: HTML fixed header bar when scroll
body: <p>I've written an example here </p>
  
  <p><a href="http://jsfiddle.net/R9Lds/" rel="noreferrer">http://jsfiddle.net/R9Lds/</a></p>
  
  <p>I want a header bar on the top of the page.</p>
  
  <pre><code>&lt;p style="vertical-align: middle; color: white"&gt;Head Bar&lt;/p&gt;
  </code></pre>
  
  <p>And when user scrolls down and up, the header bar will always be on the top.</p>
  
  <p>But now it has an issue that the bottom of the page will be cut-off.</p>
  
  <p>Just like the example above, the </p>
  
  <p>"Title 3", </p>
  
  <p>"Content 3.", </p>
  
  <p>"Author: Alex" </p>
  
  <p>will be cut-off.</p>
  
  <p>Anyone has any ideas about this issue?</p>
  
  <p>Thanks in advance.</p>
  
  <p>Eric</p>