javascript - 如何在滚动时更改背景

Question

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

我想实现一个在到达导航中的下一部分时改变颜色的背景

基本上，我想做的正是这个 MailChimp 网站所做的: http://mailchimp.com/2012/#

我尝试查看代码但无济于事。有人知道怎么做吗？

Answer 1

有很多方法可以实现这种效果，我会告诉你我认为最容易理解的方法。

假设您有一个带有您想要的背景颜色的容器，您只需要添加一个小的 jquery，它会向该容器添加一个类来覆盖“旧”背景颜色:

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

这里有一个 FIDDLE这将使它更容易理解(英语不是我的主要语言)

已编辑:我编辑了 fiddle 以添加一个简单的过渡。