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

这里是班级＆＃39;属性：

.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

你必须删除内联样式＆＃34; top：0px＆＃34;再次。否则，当第二次向下滚动时，内联样式＆＃34; top：0px＆＃34;覆盖你的＆＃34; top：-80px＆＃34;从css类中立即获得应用。动画也会发生，但会将top属性从当前值（= 0）设置为0，因此不会发生可见的更改。

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

看到这个小提琴：http://jsfiddle.net/y86L0hku/3/

jQuery动画只执行一次

1 个答案: