jQuery Animate Header on Scroll

Question

I'm building a simple header for a plain HTML5 site. I'm trying to make the header change background color at a certain .scrollTop() . I know the scroll part is working, just not the animation.

$(document).ready(function(){
    $(window).scroll(function(){
        var SCROLL = $(window).scrollTop();
        if(SCROLL > 100) {
            $('header#header').animate({
                background:'#fff'
            },300);
        }
    });
});

Answer 1

You are using just jQuery, please remember that you need external plugins to animate your background color only with jQuery.

Please check fiddle:

http://jsfiddle.net/m3dis/L06dcg4c/

I used this plugin:

http://www.bitstorm.org/jquery/color-animation/

But.

I offer you to use CSS3 transitions and jQuery addClass, removeClass .

Example:

if(SCROLL > 100) {
            jQuery('header').addClass('white');
        } else if(SCROLL < 100) {
            jQuery('header').removeClass('white');
        }

http://jsfiddle.net/m3dis/L06dcg4c/1/