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

【问题标题】：how to animate navbar on window scroll如何在窗口滚动上为导航栏设置动画
【发布时间】：2014-09-20 18:02:02
【问题描述】：

我想问一下是否有办法使用 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;
}

当您向下滚动 200 像素时，导航栏的顶部位置从 0 更改为 100 像素；这很好用，但是如果我更改方法并使用 .animate 而不是 .css，

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

它停止工作。任何想法为什么？

【问题讨论】：

这可以通过使用 CSS3 过渡来实现。 stackoverflow.com/questions/20185001/…
请查看更新后的我的第二个链接。

标签： javascript jquery css

【解决方案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;
}

【讨论】：

【解决方案2】：

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

http://jsfiddle.net/29tkxawy/

您应该保持原样（使用.css()）。

或者像这样没有 css 过渡：

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

【讨论】：