jquery - Fixed headers with css transitions -

i have following problem transitions:

css

header {     display:block;     width:100%;     height:120px;     background-color:#000;     transition: 1s ease 0s; }  #content {     height:800px;     border:1px solid #000; }  .headersticky {     position:fixed;     top:0;     z-index:1000;     transition: 1s ease 0s; } 

html

<header>lala</header> <div id="content">     <span class="test">test</span> </div> 

javascript

$('.test').waypoint(function(direction) {   if(direction == 'down')     $('header').addclass('headersticky');   else     $('header').removeclass('headersticky'); }); 

http://jsfiddle.net/swldb/

i have header , want when scroll reaches item (using jquery waypoint ), header fixed in top. want transition nice.

is possible?

thanks

a way might animate header position needs @ $(window).scrolltop(); , change class headersticky. user not able notice it, desired effect.

  if(direction == 'down')   {     $('header').animate({top:$(window).scrolltop()},500,function()     {         $('header').addclass('headersticky',500);     }   }   else     $('header').removeclass('headersticky',500);