jQuery 动画只执行一次

Question

我有一个 jQuery 功能，可以在我滚动时将我的菜单从 position: relative 放置到 fixed。

$(function() {
    var navheight = $('.nav-cont').innerHeight()
    var topTrigger = $('.navbar').offset().top;

    $(document).scroll(function() {
        if ($(this).scrollTop() >= topTrigger + navheight) {
            $('.navbar').addClass('affixed');
            $('.navbar').animate({'top':'0px'}, 1000);
            $('html').css('margin-top',navheight)
        }

        if ($(this).scrollTop() < topTrigger) {
            fixed = false;
            $('.navbar').removeClass('affixed');
            $('html').css('margin-top','0px')
        }
    });
});

这是 class' 的属性：

.affixed { 
    position: fixed; 
    z-index: 99; 
    width: 100%; 
    top: -80px; 
    -webkit-box-shadow: 3px -1px 45px 0px rgba(0,0,0,0.65);
    -moz-box-shadow: 3px -1px 45px 0px rgba(0,0,0,0.65);
     box-shadow: 3px -1px 45px 0px rgba(0,0,0,0.65);
}

我做这一切是因为，如你所见，菜单在变成 fixed 时有一个阴影，如果我没有把它固定为 -80 的值，然后用动画在页面上调用它，视觉效果不会那么好并且很机器人。我希望你明白我的意思。

现在，当我第一次向下和向后滚动时一切正常，但第二次时，我的函数中动画线的持续时间似乎不再起作用。它确实将我的菜单置于 top:0px，但忽略了持续时间。

这是为什么，我该如何解决？

Answer 1

您必须再次删除内联样式 "top: 0px"。否则，当第二次向下滚动时，内联样式 "top: 0px" 会覆盖 css-class 中的 "top: -80px" 并立即应用。动画也会发生，但会将顶部属性从当前值 (= 0) 动画化为 0，因此不会发生可见的变化。

$('.navbar').css({'top': ''});

看到这个fiddle：http://jsfiddle.net/y86L0hku/3/

jQuery 动画只执行一次

jQuery animation performs only once

jquery

jquery-animate