title: Sticky header animation
body: <p>We want our header to animate in from the top when a visitor scrolls. This our current code:</p>
  
  <pre><code>function stickMyHeader(){
  var $window = $(window),
      $menuButton = $('&lt;a href="#"&gt;Show Menu&lt;/a&gt;').addClass('menuHidden').attr('id', 'menuButtonHandle').css({display : 'none'}),
      $headerAlias = $('&lt;div id="header-alias" /&gt;').css({display : 'none'}),
      $searchButton = $('&lt;a href="#"&gt;Show Search&lt;/a&gt;').addClass('searchHidden').attr('id', 'showSearchFormButton').css({display : 'none'}),
      $headerOffset = $('#sitehead').offset(),
      $headerHeight = $('#sitehead').outerHeight(),
      $headerWidth = $('#sitehead').parent().width();
  
  if( $('#header-alias').length &lt; 1 ) 
      $headerAlias.insertBefore( $('#sitehead') );
  
  if( $('#sitehead').find('#menuButtonHandle').length &lt; 1 ) 
      $('#sitehead').append($menuButton);
  
  if( $('#topSearchBox').find('#showSearchFormButton').length &lt; 1 ) 
      $('#topSearchBox').append( $searchButton );
  
  //reset
  if( $window.width() &gt; 768 ){
      $('#header-alias').css({display : 'none', height : $headerHeight+'px', margin : '0px', padding : '0px' });
      $('#sitehead').removeClass('headerOnScroll').css({position : 'relative', width : 'auto', left : '0', opacity : 1.0});
      $('#menuButtonHandle').removeClass('menuShowUp').addClass('menuHidden').hide();
      $('#showSearchFormButton').hide().removeClass('searchShowUp').addClass('searchHidden');
      $('#site-navigation').show();
  }
  
  $('form#topSearch').unbind().show();
  $('#menuButtonHandle').unbind();
  $('#showSearchFormButton').unbind();
  
  $window.on('scroll', function(){
      if( ! jQuery.browser.mobile &amp;&amp; $window.width() &gt; 768 ){
  
          if( $(window).scrollTop() &gt; $headerHeight ){
  
              $('#header-alias').css({display : 'block'});
              $('#sitehead').addClass('headerOnScroll').css({
                  position : 'fixed',
                  display : 'block',
                  width : $headerWidth+'px', 
                  top : '0', 
                  left : $headerOffset.left+'px', 
                  zIndex : '8'
              });
  
  
              if( ! jQuery.browser.mobile &amp;&amp; $window.width() &gt; 768 ){
                  $('#sitehead').css({ opacity : 0.9 });
              }
  
              if( $window.width() &lt; 768 ){
                  $('#site-navigation').hide();
                  $('#menuButtonHandle').show().removeClass('menuShowUp').addClass('menuHidden');
              } else {
                  $('#site-navigation').show();
                  $('#menuButtonHandle').hide().removeClass('menuShowUp').addClass('menuHidden');
              }
  
          }   
          else {
              $('#header-alias').css({display : 'none'});
              $('#sitehead').removeClass('headerOnScroll').css({position : 'relative', width : 'auto', left : '0', opacity : 1.0});
              $('#site-navigation').stop(true,true).fadeIn(300);
  
              $('#menuButtonHandle').hide().removeClass('menuShowUp').addClass('menuHidden');
  
          }
  
      }
  });
  
  if( $window.width() &lt; 768 ){
      var NavHeight = $('#site-navigation').outerHeight();
  
      $('#site-navigation').hide();
      $('form#topSearch').hide();
      $('#menuButtonHandle').show().removeClass('menuShowUp').addClass('menuHidden');
      $('#header-alias').css({display : 'block', height : '50px', margin : '0px', padding : '0px' });
      $('#sitehead').addClass('headerOnScroll').css({
          position : 'fixed',
          display : 'block',
          width : '100%', 
          top : '0', 
          left : '0', 
          zIndex : '8'
      });
      $('#showSearchFormButton').removeClass('searchShowUp').addClass('searchHidden').css({display : 'block'});
  
  
  
  }
  
  $('form#topSearch').on('submit', function(e){
      if( $window.width() &lt; 768 ){
          if( $('form#topSearch').find('input[type="text"]').val() == "" ){           
              $('#showSearchFormButton').click();
              return false;
          }
          else {
              return true;
          }
      }
  });
  
  
  
  if( ! jQuery.browser.mobile ){
      $('#sitehead').on('mouseover', function(){
          if( $('#sitehead').hasClass('headerOnScroll') &amp;&amp; $window.width() &gt; 768 ){
              if(Modernizr.csstransforms &amp;&amp; Modernizr.csstransitions){
                  $('#sitehead').stop(true,true).transition({opacity : 1.0}, 500, 'easeOutSine' );
              } else {
                  $('#sitehead').stop(true,true).animate({opacity : 1.0}, 500, 'easeOutSine' );
              }
          }
      });
      $('#sitehead').on('mouseleave', function(){
          if( $('#sitehead').hasClass('headerOnScroll') &amp;&amp; $window.width() &gt; 768 ){
              if(Modernizr.csstransforms &amp;&amp; Modernizr.csstransitions){
                  $('#sitehead').stop(true,true).transition({opacity : 0.9}, 500, 'easeOutSine' );
              } else {
                  $('#sitehead').stop(true,true).animate({opacity : 0.9}, 500, 'easeOutSine' );
              }
          }
      });
  }
  
  $('#showSearchFormButton').on('click', function(e){
      e.preventDefault();
  
      if( $window.width() &lt; 768 ){
              if( $('#showSearchFormButton').hasClass('searchHidden') ){
                  $('form#topSearch').stop(true,true).fadeIn(300);
                  $('form#topSearch').find('input[type="text"]').focus();
  
                  $('#showSearchFormButton').removeClass('searchHidden').addClass('searchShowUp');
              } else {
                  $('form#topSearch').stop(true,true).fadeOut(300);
                  $('#showSearchFormButton').removeClass('searchShowUp').addClass('searchHidden');
              }
      }
  });
  
  $('#menuButtonHandle').on('click', function(e){
      e.preventDefault();
  });
  
  }
  </code></pre>
  
  <p>Does anyone has an idea how to do this?
  A link to a live example of this page is:
  <a href="http://kikkelogos.nl/portfolio/" rel="nofollow">Logo portfolio</a></p>
  
  <p>Any help will be much appreciated!</p>
  
  <p>Thnx!</p>
  
  <p>Tim</p>