[英]How to make the background change on scroll
我正在尝试制作一个交互式品牌指南网站,并且我想制作一个单一的滚动布局。
我想实现一个背景,当它到达导航的下一部分时会改变颜色
基本上,我想做的就是这个MailChimp网站的确切功能: http : //mailchimp.com/2012/#
我尝试无济于事。 有人知道该怎么做吗?
有很多方法可以达到这种效果,我将让您知道我发现最容易理解的方法。
假设您有一个具有所需背景颜色的容器,则只需添加一个小jQuery,它将为该容器添加一个类以覆盖“旧的”背景颜色:
$(window).scroll(function () {
if ($(window).scrollTop() > 500) {
$(".background").addClass("red");
} else {
$(".background").removeClass("red");
}
});
在这里,您将有一个FIDDLE ,这将使它更容易理解(不是我的主要lenguaje)
编辑:我编辑了小提琴以添加一个简单的过渡。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.