使用jQuery为固定元素设置动画

Question

当我尝试使用jQuery为我的dom上的固定元素设置动画时，我遇到了一个问题。

    var increased = false;

    $(document).on('scroll', function(){

        var scrollTop = $(this).scrollTop();

        if( scrollTop >= 118 && !increased ){
            $('header nav').animate({
                height: '116px'
            }, 500, 'linear', function(){
                increased = true;
            });
        }

        if( scrollTop < 118 && increased ){
            $('header nav').animate({
                height: '50px'
            }, 500, 'linear', function(){
                increased = false;
            });
        }

    });

我的导航：http://glui.me/?i=g6to3wnugmtt1je/2014-02-06_at_20.28_2x_(1).png/

动画后：http://glui.me/?i=vtfadya588b5mx7/2014-02-06_at_20.30_2x.png/