jquery - css トランジションを含む固定ヘッダー

Question

遷移に関して次の問題があります。

CSS

header {
    display:block;
    width:100%;
    height:120px;
    background-color:#000;
    transition: all 1s ease 0s;
}

#content {
    height:800px;
    border:1px solid #000;
}

.headerSticky {
    position:fixed;
    top:0;
    z-index:1000;
    transition: all 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/

ヘッダーがあり、スクロールがアイテムに到達したときに（ jquery waypoint を使用）、ヘッダーを上部に固定したい。しかし、見栄えを良くするために、これにはトランジションが必要です。

出来ますか？

ありがとう