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

Question

我通过 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;
}

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

提前致谢！！

Answer 1

在规则中多次设置 transition 只会覆盖之前的规则（此外，如果您在两个 classes 之一中删除属性不会被动画化，你必须声明新值，所以你应该在第二条规则中包含 top-margin 和 0 value)

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

如果保留初始的 class 并切换一个新的以进行更改（只有在两个状态之间发生变化的属性，那就更干净了)

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

Answer 2

我已经用 skrollr.js 做过很多次类似的事情。它比您在这里尝试做的更容易、更强大。您可以轻松构建大量滚动动画。

https://github.com/Prinzhorn/skrollr

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

jquery/css transition when reached top of screen

html

javascript

css

jquery