title: A sticky/fixed header won't work onscroll
body: <p>I've got the following code for a <a href="http://www.inside-guides.co.uk/brentwood/news/index.html" rel="nofollow">sticky header</a>, but the scroll makes the content jump up the page and it's not a smooth transition. The #top-nav-wrapper barely scrolls when the fixed header below is activated.</p>
  
  <p>The top nav should scroll up naturally and the search bar should remain.</p>
  
  <p>2 scripts produce the same results, as does cloning:</p>
  
  <pre><code>&lt;script&gt;
  $(document).scroll( function() {
      var value = $(this).scrollTop();
      if ( value &gt; 48 ) {
          $(".header").css("position", "fixed");
          $("body").css("padding-top", "90px");
      } else {
          $(".header").css("position", "relative");
          $("body").css("padding-top", "0");
      }
  });
  &lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
      var height = $('.header').outerHeight();
      $(window).scroll(function() {
              if($(this).scrollTop() &gt;= height)
              {
                  $('.header').css('position','fixed');
                  $('body').css('padding-top',height+'px');
              }
              else if($(this).scrollTop() &lt;= height)
              {
                  $('.header').css('position','static');
                  $('body').css('padding-top','0');
              }
      });
      $(window).scroll();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The 48 value is the height of the #top-nav-wrapper, plus it has a box-shadow.</p>
  
  <p>The .header class with the search bar is what should remain.</p>
  
  <p>The basic html:</p>
  
  <pre><code>&lt;div class="headerWrapper"&gt;
      &lt;div id="top-nav-wrapper"&gt;&lt;/div&gt;
          &lt;div class="header"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>body {
    background: #EEE;
  }
  
  #top-nav-wrapper {
    width: 100%;
    position: relative;
    box-shadow: 0px 1px 1px 0px #B8B8B8;
    z-index: 2001;
    background: #EEE;
  }
  
  .header {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 90px;
    z-index: 2000;
    background: #EEE;
    height: 90px;
    box-shadow: 0px 1px 2px #C4C4C4;
  }
  </code></pre>
  
  <p>I tried the following suggestion, but it's the same effect as before:</p>
  
  <pre><code>&lt;script&gt;
          $(window).scroll( function() {
              var value = $(this).scrollTop();
              var $body = $('body');
              var docked = $body.hasClass('docked');    
  
              if ( value &gt; 48 ) {
                  if( !docked ) {
                      $body.addClass('docked');
                  }
              } else {
                  if( docked ) {
                      $body.removeClass('docked');
                  }
              }
          });
          &lt;/script&gt;
  </code></pre>
  
  <p>Some have suggested the z-index is higher on the #top-nav-wrapper, but this has nothing to do with it and also just hides the problem - plus there's opacity on the header so it shows underneath.</p>
  
  <p>I need a real solution to fixing what should be so simple; not a cover up.</p>
  
  <p>Any ideas appreciated.</p>