How to make the background change on scroll

Question

I am trying to make an interactive brand guide site and I wanted to make a single scroll layout.

I want to implement a background that changes color when it reaches to the next section in the navigation

Basically, what I want to do is exactly what this MailChimp site does: http://mailchimp.com/2012/#

I tried looking through the code with no avail. Anyone know how to go about doing this?

Answer 1

There are many ways to achieve that effect, I will let you know the way I find the easiest to understand.

assuming you have a container with the background color you wish, you just have to add a little jquery that will add a class to that container to overwrite the "old" background color:

$(window).scroll(function () {            
    if ($(window).scrollTop() > 500) {
        $(".background").addClass("red");
    } else {
        $(".background").removeClass("red");
    }
});

Here you have a FIDDLE that will make it easier to understand (english not my main lenguaje)

Edited: I edited the fiddle to add a simple transition.