Javascript 滚动jQuery切换CSS背景图像

我正在尝试制作一个标题，使其在卷轴上稍微变小。当前，标题大小中涉及的jQuery的代码如下所示：

$(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);
        }
    } else {
        if ($('#Header').data('size') == 'small') {
            $('#Header').data('size', 'big');
            $('#Header').stop().animate({
                height: '100px'
            }, 600);
        }  
    }
});

这是伟大的工作，我有标题大小部分下来。为了将徽标的大小从大约80 x 80更改为40 x 40（包括过渡），我如何在一定程度上复制这一点

以下是徽标的CSS：

#Logo {
    background: url("images/Logo.png") no-repeat;
    position: absolute;
    top: 8px;
    width: 81px;
    height: 85px;
    z-index: 73;
    -webkit-transition: background-image .5s;
    margin-left: 100px;
}

---

网站URL已编辑为包含您的完整代码

你的JS：

$(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);
        }
    } else {
        if ($('#Header').data('size') == 'small') {
            $('#Header').data('size', 'big');
            $('#Header').stop().animate({
                height: '100px'
            }, 600);
            $('#Logo').stop().animate({
                height: '85px',
                width: '81px'
            },600);
        }  
    }
});

还有你的css：

#Logo {
    background: url("images/Logo.png") no-repeat;
    background-size: contain;
    position: absolute;
    top: 8px;
    width: 81px;
    height: 85px;
    z-index: 73;
    -webkit-transition: background-image .5s;
    margin-left: 100px;
}

我想指出的是，虽然jQuery这样做很好，很容易，但有些（我自己也包括）可能会认为最好在一个CS*类（类似于“小”）上同时对α-Head和Yang-Logo进行切换，并使用CSS进行调整大小和动画。css转换将是：

#Header, #Logo {
    transition: height 0.6s, width 0.6s;
}

---

更改宽度/高度将切断徽标（这是一个背景），将背景大小：contain（包含在您的#徽标上）cssThanks；为了确保我做得正确，你能把你写的代码整合到我已经有的代码中吗？