Question

$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
    $('.nav').css('margin-top', '5px');
     $('.sep').css('margin-top', '20px');
     $('.logo').fadeOut(500);
     $('#navWrap').animate({
        height: '62px'
        }, 500, function() {
        });
}
}
);
$(window).scroll(function () {
 if ($(window).scrollTop() < 100) {
      $('.nav').css('margin-top', '23px');
     $('.sep').css('margin-top', '40px');
     $('.logo').fadeIn(500);
}
}
);

我有这个代码，当你向下滚动时，我的导航动画高度从100px到62px，我试图让它在再次到达顶部时动画回到100px，但似乎无法这样做

我通常在第二个窗口.scroll函数中再次包含.animate但是没有做任何事情。

Answer 1

你很亲密，只需要做一些修改。

首先，您需要跟踪导航器的当前状态。否则，每次滚动时，您都会在动画链中添加一个新请求以使其变大或变小。您只想在从顶部穿过100的“阈值”时触发动画。
其次，您希望在动画之前调用stop()，或向下滚动然后向上将导致每个新动画进入队列，导航栏将继续打开和关闭。
第三，你不需要两次拨打$(window).scroll ...你有一个独家条件。要么你从顶部超过或低于100，只有你还没有这样做，你才能执行CSS更改和动画。将它放入同一个功能可以更容易管理。

var navsize = "large";
$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        if (navsize == "large")
        {
            navsize = "small";
            $('.nav').css('margin-top', '5px');
            $('.sep').css('margin-top', '20px');
            $('.logo').stop().fadeOut(500);
            $('#navWrap').stop().animate({
                height: '62px'
            }, 500);
        }
    }
    else
    {
        if (navsize == "small")
        {
            navsize = "large";
            $('.nav').css('margin-top', '23px');
            $('.sep').css('margin-top', '40px');
            $('.logo').stop().fadeIn(500);
            $('#navWrap').stop().animate({
                height: '100px'
            }, 500);
        }
    }
});

导航动画高度上下

1 个答案: