Question

    $(window).scroll(function() 
{
    if (window.matchMedia('(min-width: 900px)').matches)
    {
        if ($(this).scrollTop()>0)
        {
            $('#upper_bar_desktop').animate({"background-color": "#ffffff" , "color": "#000000"}, 1200 );
        }

        else{
            $("#upper_bar_desktop").animate({"background-color": "initial" , "color": "#ffffff"}, 1200 );
        }
     }
 });

我已编写此代码以在向下滚动时更改上方栏的背景颜色和字体颜色，它在滚动一次时效果很好但是当我再次返回时它不会执行动画。

感谢hekp

Answer 1

将初始值更改为颜色。＃000000例如。

jQuery无法初始化。

另外我建议使用课程。

    if ($(this).scrollTop()>0)
    {
        $('#upper_bar_desktop').addClass('fixed'); 
    }

    else{
        $('#upper_bar_desktop').removeClass('fixed'); 
    }

然后，您只使用CSS过渡进行动画处理。

#upper_bar_desktop{
  transition:1s;
}

#upper_bar_desktop.fixed{
  background:#fffff;
  color:red;
}

jquery动画颜色只在scolling上工作一次

1 个答案: