1 
$(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 ，但这没有任何作用。

4

1 回答 1

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);
        }
    }
});
于 2013-02-26T04:20:04.350 回答