jquery - 动画高度 - 否则不起作用

Question

只是第一个“其他”不起作用。向下滚动时，topColor div 将从原来的 15 高扩展到 150 高，但当我在顶部附近滚动时不会收缩回 15 高。

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 20) {
            $('#topColor').animate({
                height: "150px"
            });
        } else {
            $('#topColor').animate({
                height: "15px"
            });
        }
        if ($(this).scrollTop() > 300) {
            $("#fixedMenuBar").fadeIn('slow', 'linear');
        } else {
            $("#fixedMenuBar").fadeOut('fast', 'linear');
        }
    });
});

Answer 1

您不应该else在滚动响应动画中使用，else if而是使用更具体的并且animate会产生冲突，因为滚动值将始终更改并且 jQuery 不能无限重复相同的动画。

但如果你坚持animate试试这个：

    var scrollVal = $(this).scrollTop();

    if ( scrollVal < 20 )
      if ( $("#fixedMenuBar").is(':visible') ) {
        $("#fixedMenuBar").fadeOut('fast', 'linear');
      }
      if ( parseInt($('#topColor').css('height')) != 150 ) {
        $('#topColor').animate({ height: "150px" });
      }

    }else if ( scrollVal >= 20 && scrollVal < 300 ) {
      if ( $("#fixedMenuBar").is(':visible') ) {
        $("#fixedMenuBar").fadeOut('fast', 'linear');
      }
      if ( parseInt($('#topColor').css('height')) != 15 ) {
        $('#topColor').animate({ height: "15px" });
      }

    }else if ( scrollVal >= 300 ) {
       if ( !$("#fixedMenuBar").is(':visible') )
        $("#fixedMenuBar").fadeIn('slow', 'linear');
    }

这个答案也应该对您有所帮助：设置窗口滚动动画的 CSS 值限制