如何在滚动时更改背景

Question

我正在尝试制作一个互动品牌指南网站，我想制作一个单一的滚动布局。

我想实现一个背景，当它到达导航的下一部分时会改变颜色

基本上，我想要做的就是这个MailChimp网站的作用： http://mailchimp.com/2012/#

我试着查看代码但没有用。任何人都知道如何做到这一点？

Answer 1

有很多方法可以达到这个效果，我会告诉你我最容易理解的方式。

假设你有一个你想要的背景颜色的容器，你只需添加一个小的jquery，它将一个类添加到该容器中以覆盖“旧的”背景颜色：

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

在这里你有一个FIDDLE，这将使它更容易理解（英语不是我的主要lenguaje）

编辑：我编辑了小提琴，添加了一个简单的过渡。