Jquery 设置高度动画-否则不起作用

只是第一个“其他”不起作用。向下滚动时，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');
        }
    });
});

---

您不应该在滚动响应动画中使用

else

，为了更具体，请使用

else if

，并且

animate

将产生冲突，因为滚动值将始终更改，jQuery不能无限重复相同的动画

但是，如果您坚持要设置动画，请尝试以下方法：

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

var scrollVal=$（this.scrollTop（）；
如果（滚动值<20）
如果（$（“#fixedMenuBar”）。是（':visible'））{
$（“#fixemenubar”）.fadeOut（'fast'，'linear'）；
}
if（parseInt（$（'#topColor'）.css（'height'））！=150）{
$（'#topColor'）。设置动画（{height:“150px”}）；
}
}否则如果（scrollVal>=20&&scrollVal<300）{
如果（$（“#fixedMenuBar”）。是（':visible'））{
$（“#fixemenubar”）.fadeOut（'fast'，'linear'）；
}
if（parseInt（$（'#topColor'）.css（'height'））！=15）{
$（'topColor'）。动画（{height:'15px}）；
}
}否则如果（滚动值>=300）{
如果（！$（“#fixedMenuBar”）。是（“：可见”）
$（“#fixemenubar”）.fadeIn（'slow'，'linear'）；
}

---

这个答案也应该对您有所帮助：

您不应该在滚动响应动画中使用

else

，如果要更具体，请使用

else，并且
animate
将产生冲突，因为滚动值将始终更改，jQuery不能无限重复相同的动画

但是，如果您坚持要设置动画，请尝试以下方法：

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

var scrollVal=$（this.scrollTop（）；
如果（滚动值<20）
如果（$（“#fixedMenuBar”）。是（':visible'））{
$（“#fixemenubar”）.fadeOut（'fast'，'linear'）；
}
if（parseInt（$（'#topColor'）.css（'height'））！=150）{
$（'#topColor'）。设置动画（{height:“150px”}）；
}
}否则如果（scrollVal>=20&&scrollVal<300）{
如果（$（“#fixedMenuBar”）。是（':visible'））{
$（“#fixemenubar”）.fadeOut（'fast'，'linear'）；
}
if（parseInt（$（'#topColor'）.css（'height'））！=15）{
$（'topColor'）。动画（{height:'15px}）；
}
}否则如果（滚动值>=300）{
如果（！$（“#fixedMenuBar”）。是（“：可见”）
$（“#fixemenubar”）.fadeIn（'slow'，'linear'）；
}

这个答案也应该对您有所帮助：
美元（This.scrollTop（）的值是多少？使用console.log（$（this.scrollTop（））将其登录到控制台；$（this.scrollTop（）的值是多少？使用console.log（$（this.scrollTop（））将其登录到控制台+1，您还应该检查元素
$（）是否为（':animated'）
，以防止出现大型动画查询谢谢您…我的第一次jquery尝试。我添加了你的代码…但现在我的网站无法加载。将它包装在$（document）.ready（function（）和$（window）.scroll（function（））中。我最后只使用了.scrollTop和translateY来向下和向后滑动对象。现在更简单了。再次感谢您的时间！+1，您还应该检查元素
$（）是否（'：animated'）
为防止出现大型动画查询谢谢你…我的第一次jquery尝试。我添加了你的代码…但现在我的网站没有加载。将其包装在$（文档）。就绪（函数（）和$（窗口）。滚动（函数（）。我最后只使用了.scrollTop和translateY来向下和向后滑动对象。现在更简单。再次感谢你的时间！