Change header color when page scroll down

Question

I am using the following script when i scroll down the page then header have supposed to be changed the color according to script but script is not working I am using that plugin also-:

<script type="text/javascript" src="https://raw.github.com/piouPiouM/jquery-color/master/jquery.color.js"></script>

Here is the script-:

         jQuery("#subheader").css("position", "fixed");
         jQuery(window).on("scroll",function () {
             jQuery("#subheader").stop().animate({
                 backgroundColor: jQuery(window).scrollTop() > 0 ? '#FFFFFF' : 'rgba(255,255,255,0.0)'
             }, 230);
         });

#Subheader is the div id of header I am using that plugin also here is my head tag-:

 <script src="http://code.jquery.com/color/jquery.color-2.1.2.js" type="text/javascript"></script>





     <script type="text/javascript" >
         jQuery("#subheader").css("position", "fixed");
        jQuery(window).scroll(function() {
            jQuery("#subheader").stop().animate({
              backgroundColor: jQuery(window).scrollTop() > 0 ? '#FFFFFF' : 'rgba(255,255,255,0.0)'
            }, 230);
        }); 
    </script>

But still not work

Thanks For help

Are you including the Jquery color plugin? https://github.com/jquery/jquery-color you can't animate background colours without it — James King, Aug 10 '15 at 11:37
Are you adding the jquery color after linking to jquery? Can we see your `` tag? — theonlygusti, Aug 10 '15 at 11:58

score 0 · Answer 1 · answered Aug 10 '15 at 11:57

Quoting the jQuery doc-things:

most properties that are non-numeric cannot be animated using basic jQuery functionality. For example, width, height, or left can be animated but background-color cannot be animated

So, you just can't animate backgroundColor with vanilla jQuery.

If you install the jQuery.Color plugin, your script should work.

Change header color when page scroll down

1 Answers1