[英]How to make the background change on scroll
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/# 基本上,我想做的就是这个MailChimp网站的确切功能: http : //mailchimp.com/2012/#
I tried looking through the code with no avail. 我尝试无济于事。 Anyone know how to go about doing this?
有人知道该怎么做吗?
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: 假设您有一个具有所需背景颜色的容器,则只需添加一个小jQuery,它将为该容器添加一个类以覆盖“旧的”背景颜色:
$(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) 在这里,您将有一个FIDDLE ,这将使它更容易理解(不是我的主要lenguaje)
Edited: I edited the fiddle to add a simple transition. 编辑:我编辑了小提琴以添加一个简单的过渡。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.