jquery header which will stay static while page is scrolled down
<p>I have looking for an example to create a header which will stay static while page is scrolled down. Exactly like <a href="http://www.pixedelic.com/plugins/camera/" rel="nofollow">this example</a>.</p>

<p>I looked at <a href="http://stackoverflow.com/questions/9684259/fixed-header-whilst-scrolling">this one</a>, <a href="http://forum.jquery.com/topic/fixed-header-with-scroll-to-problem" rel="nofollow">this one</a> and some more but didn't find properly working example.</p>

<p>Thanks in advance</p>

<pre><code>&lt;!DOCTYPE html&gt; 
&lt;html&gt; 

&lt;head&gt;
    &lt;style&gt;
    #header { height: 100px; background:#EEEEEE; }
    #footer { height: 100px; background:#EEEEEE; }
    #content { height: 1000px; background:#CCCCCC; }
    &lt;/style&gt;

    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;div id="container"&gt;
      &lt;div id="header"&gt;Header&lt;/div&gt;
      &lt;div id="content"&gt;Content&lt;/div&gt;
      &lt;div id="footer"&gt;Footer&lt;/div&gt;
    &lt;/div&gt;

&lt;/body&gt; 
&lt;/html&gt;
</code></pre>
