Javascript 到达屏幕顶部时的jquery/css转换

当您位于页面顶部时，我会通过jQuery进行检测。当你到达页面顶部时，我会显示一个更大的徽标。当您不在屏幕顶部时，徽标会稍微小一些。它工作得很好，但我想让它平稳一点过渡。但它似乎不起作用

以下是我的jQuery：

jQuery(window).scroll(function () {
        if (jQuery(window).scrollTop() >= 1) {
            jQuery('.navbar-brand>div').addClass('small-logo');
        } else {
            jQuery('.navbar-brand>div').removeClass('small-logo');
        }
});

下面是我的css类：

.logo{
    margin-top: 10px;
    width: 250px;
    height: 125px;
    -webkit-transition: width 1s; /* Safari */
    -webkit-transition: height 1s; /* Safari */
    transition: width 1s;
    transition: height 1s;
}

.small-logo{
    width: 150px;
    height: 75px;
    -webkit-transition: width 1s; /* Safari */
    -webkit-transition: height 1s; /* Safari */
    transition: width 1s;
    transition: height 1s;
}

有人能帮我完成这个小动画吗

---

提前谢谢

在规则中多次设置

转换

只会覆盖以前的转换（此外，如果删除两个类中的一个属性，则该属性将不会设置动画，您必须声明新值，以便在第二个规则中使用

0

值包含

上边距

）

---

保留初始类并切换新类以进行更改（只有属性在两种状态之间更改）会更干净

及

---

我已经使用skrollr.js多次做过类似的事情。这比你在这里要做的要简单和强大得多。您可以轻松构建大量滚动动画

---

试着制作一个JSFIDLE，这样我们就可以。。。拨弄=P@CalebO利里，我会尽我最大的努力重现我的问题，等一下。嗯，我已经尝试了你的答案，不幸的是，没有什么变化。我的错，我只是愚蠢！谢谢你的回答！

.logo{
    margin-top: 10px;
    width: 250px;
    height: 125px;
    -webkit-transition: width 1s, height 1s; /* Safari */
    transition: width 1s, height 1s;
}

.small-logo{
    margin-top:0;
    width: 150px;
    height: 75px;
    -webkit-transition: width 1s, height 1s; /* Safari */
    transition: width 1s, height 1s;
}

jQuery(window).scroll(function () {
    jQuery('.navbar-brand > .logo').toggleClass('small', jQuery(window).scrollTop() >= 1);
});

.logo{
    margin-top: 10px;
    width: 250px;
    height: 125px;
    -webkit-transition: width 1s, height 1s; /* Safari */
    transition: width 1s, height 1s;
}

.logo.small{
    margin-top:0;
    width: 150px;
    height: 75px;
}