CODEWITHSUNDEEP
jquerycssjquery-animate
Nocraze
Nocraze

Reputation: 25

Can't animate header with jQuery

So I've been looking far and wide for ways to animate my header to change background color when I scroll further then 550px.

Here is the code:

$(function(){
$('header').data('size','big');
});

$(window).scroll(function(){
var $header = $('header');
if ($('body').scrollTop() > 550) {
    if ($header.data('size') == 'big') {
        $header.data('size','small').stop().animate({
            'background','#444349'
            }, 'slow');
    }
} else {
    if ($header.data('size') == 'small') {
        $header.data('size','big').stop().animate({
            'background','transparent'
        }, 'slow');
    }  
}
});

Upvotes: 0

Views: 106

Answers (1)

Stephan
Stephan

Reputation: 379

Why not use CSS to animate the header?

CSS: 
header {
    background: transparent;
    transition: background .6s; /* 'slow' is 600ms */
}

header.foobar {
    background: #444349;
}
JavaScript: 
$(window).scroll(function(){
    if($('body').scrollTop() > 550){
        $('header').addClass('foobar');
    }else{
        $('header').removeClass('foobar');
    }
});

Check it out here.

Upvotes: 1

Related Questions