使用jQuery更改滚动CSS

Question

我正在尝试实现一个用户在我的网站上滚动时变小的标题。标识和标题部分已完成，但是当我尝试调整导航文本的大小时，某些内容会被破坏，标题在滚动时不再缩小。这是我的破解代码，文本大小调整:( #HOME是与导航链接关联的样式的ID）：

$(function() {
$('#Header').data('size','big');
});

$(window).scroll(function() {
if ($(document).scrollTop() > 0) {
    if ($('#Header').data('size') == 'big') {
        $('#Header').data('size', 'small');
        $('#Header').stop().animate({
            height: '60px'
        }, 600);
        $('#Logo').stop().animate({
            height: '40px',
            width: '40px'
        },600);
        $('#Logo:hover').stop().animate({
            height: '40px',
            width: '40px'
        },600);
        $('#HOME').stop().animate({
            font-size: '14px',
            top: '20px'
        },600);
    }
} else {
    if ($('#Header').data('size') == 'small') {
        $('#Header').data('size', 'big');
        $('#Header').stop().animate({
            height: '100px'
        }, 600);
        $('#Logo').stop().animate({
            height: '85px',
            width: '81px'
        },600);
        $('#Logo:hover').stop().animate({
            height: '40px',
            width: '40px'
        },600);
        $('#HOME').stop().animate({
            font-size: '17px',
            top: '40px'
        },600);
    }  
}
});

如果 和 else ，则代码无法添加。