Question

我使用jQuery在滚动窗口顶部修复导航栏，sticky类负责处理。但是，我希望浏览器能够顺利完成，就像快速淡入淡出一样。我可以在添加课程之前使用fadeIn吗？到目前为止，它还没有奏效。

var num = 1; //number of pixels before modifying styles
$(window).bind('scroll', function() {
    if ($(window).scrollTop() > num) {
        $('.navbar') fadeIn(500).addClass('sticky');
    } else {
        $('.navbar').removeClass('sticky');
    }
});

Answer 1

您忘了将.放在此声明中

 $('.navbar')fadeIn(500).addClass('sticky');

应该是

 $('.navbar').fadeIn(500).addClass('sticky');

Answer 2

向.navbar CSS添加转换：

.navbar {
    ...
    transition: all 0.5s;
}

注意：必须始终设置要设置动画的属性 - 甚至在滚动之前...

这是一个有效的演示：http://jsfiddle.net/ky3916tn/1/

使用jquery将其固定到顶部时，无法淡入我的导航栏

2 个答案: