在Scroll上使用jQuery切换CSS背景图像

Question

我正在尝试使标题变得更小滚动。 当前，与头大小有关的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;
}

网站网址为http://www.tremor.yt/Site/Creators.html

Answer 1

*已编辑以包括您的完整代码

您的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做到了这一点，并且很轻松，但是有些人（包括我自己）可能认为最好在#Header和#Logo上同时切换一个CSS类（类似“ smaller”）并使用CSS来进行大小调整和动画处理。 然后，css转换将是：

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