title: jquery fix div on the top while scrolling
body: <p>Can somebody have a look at code below?<Br></p>
  
  <p><a href="http://jsfiddle.net/PeterPark/xC2YH/" rel="nofollow">http://jsfiddle.net/PeterPark/xC2YH/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
              &lt;header&gt;
                  &lt;div id="fixitattop"&gt;
                      &lt;hr&gt;&lt;h1&gt;It's me&lt;/h1&gt;&lt;hr&gt;
                      &lt;div id="nav"&gt;
                          &lt;a href="#"&gt;Menu1&lt;/a&gt; / &lt;a href="#"&gt;Menu2&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;hr&gt;  
                  &lt;/div&gt;  
              &lt;/header&gt;
  
              &lt;div class="main"&gt;
                  &lt;div class="project1"&gt;&lt;/div&gt;
                  &lt;div class="project2"&gt;&lt;/div&gt;
                  &lt;div class="project3"&gt;&lt;/div&gt;
                  &lt;div class="project4"&gt;&lt;/div&gt;
                  &lt;div class="project5"&gt;&lt;/div&gt;
                  &lt;div class="project6"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;footer&gt;
                  &lt;p&gt;
  
                  &lt;/p&gt;
              &lt;/footer&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function(){
      $(window).scroll(fixHeader);
      fixHeader();
  
  
  });
  
  function fixHeader (){
      var $fixit = $('#fixitattop');
      if($(window).scrollTop() &gt; 100){
          $fixit.css({
              'position':'fixed',
              'top':'2px'
  
          });
      } else {
          $fixit.css({
              'position':'relative',
              'top':'auto'
          });
      }
  }
  </code></pre>
  
  <p>I would like to fix <code>fixitattop</code> div and its subcontents on the top while scrolling but when <code>position</code> changes to "fixed", it gets ugly. Can somebody let me know a fix for this?</p>