jquery - Change background-color while scrolling

Question

I would like the background-color of my header to change to background-color of the div it scrolls past. So, when scrolled to the div #about (green), the background-color of my header will also change to green. I have this so far, but it's not working. Any help is greatly appreciated.

var t = $('#about').offset().top - 100;

$(document).scroll(function(){
    if($(this).scrollTop() > t)
    {   
        $('header').css({"background-color":"green"});
    } 
});

Check out my fiddle.

Answer 1

Your code works just fine in your fiddle AFTER you add jQuery to it. (I used 1.9.1).