Question

我想询问是否有办法使用jQuery animate（）方法在窗口滚动上为水平导航栏的顶级属性设置动画。

以下是我使用的代码：

window.addEventListener("scroll", function() {
if (window.scrollY > 200) {
    $('#navbar').css({top:"100px"});
}
else {
    $('#navbar').css({top:"0px"});
}
},false);

CSS：

#navbar{
top:0;
position:fixed;
transition: top 0.5s;
}

向下滚动200px时，导航栏会将其顶部位置从0更改为100px; 这工作正常，但如果我改变方法并将.animate而不是.css，

$('#navbar').animate({top:"100px"});

它停止工作。有什么想法吗？

Answer 1

您可以使用css transition执行此操作，如何使用jQuery addClass代替css()

来实现此目的

DEMO

$(window).on('scroll', function () {
    if ($(this).scrollTop() > 200) {
        if (!$('.navbar').hasClass('expand')) {
            $('.navbar').addClass('expand');
        }
    } else {
        if ($('.navbar').hasClass('expand')) {
            $('.navbar').removeClass('expand');
        }
    }
});


.navbar {
    top: 0;
    position: fixed;
    transition: top 0.5s;
}

.navbar.expand {
    top: 100px;
}

Answer 2

每次在每个像素上滚动页面时都会执行滚动事件侦听器，并且动画从begin开始。这会产生意想不到的结果。

http://jsfiddle.net/29tkxawy/

你应该保持原样（.css()）。

或者像没有css过渡的那样：

http://jsfiddle.net/29tkxawy/10/

如何在窗口滚动上为导航栏设置动画

2 个答案: