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

Question

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

这是我的 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;
}

谁能帮我制作这个小动画？

提前致谢!

Answer 1

在规则中多次设置 transition 只会覆盖之前的规则(此外，如果您删除两个类之一中的属性，它将不会被激活，您必须声明新值，因此您应该在第二条规则中包含 top-margin 和 0 值)

.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;
}