Question

如果标题小于600px，我希望标题更改回原始颜色？

考虑使用switch语句，但不知道wld与jquery一起工作。

我正在练习Jquery atm。

  $(window).on("scroll",function(){

  if($(window).scrollTop() > 600) {
   $(".header").animate({backgroundColor: "#fff" },800);
    $(".header").animate({color: "#000000" },500);
  }

 else {
   $(".header").animate({backgroundColor: "#000000" },800);
   $(".header").animate({color: "#fff" },500);
 }

});

Answer 1

滚动时可能看不到动画的原因是因为滚动时会出现大量动画队列。

解决方案是使用.stop()方法停止当前正在发生的任何动画并运行您想要的动画。所以将代码更改为：

$(window).on("scroll",function(){
    if($(window).scrollTop() > 600) {
        $(".header").stop().animate({backgroundColor: "#fff", color: "#000000" },800);
    } else {
        $(".header").stop().animate({backgroundColor: "#000000", color: "#fff" },800);
    }
});

请参阅JSFiddle

使用jquery更改滚动标题的背景 - 当您向上滚动时更改回默认颜色

1 个答案: