2016-11-17 75 views
0

我需要jQuery帮助!我正在使用jquery-3.1.1.minjquery.color-2.1.0滚动时更改div背景(jQuery)

我得到了一个至少有一个“顶部”div和“footer”div的网页。两者都被设置为固定。我想要的是:当您向下滚动div的背景时,需要更改背景。当您再次滚动时,应该将其更改为原始背景。

我有以下jQuery代码。第一部分工作正常;当我向下滚动时,背景会发生变化。我的问题是当我向上滚动时,我如何让他们再次改变。

我已经在下面的代码中用'else'试过了,但那不起作用。谁可以帮忙?对jQuery不太好。

$(document).scroll(function(){ 
    if($(this).scrollTop() > 90){ 
     $(".top").animate({"background-color":"#101010"},'slow'); 
     $(".footer").animate({"background-color":"#101010"},'slow'); 
    }else{ 
     $(".top").animate({"background-color":"rgba(16, 16, 16, 0.8)"},'slow'); 
     $(".footer").animate({"background-color":"rgba(16, 16, 16, 0.8)"},'slow'); 
    } 
}); 
+0

你在第二人有背景是一样的,只有80%的不透明度。那是你想要做的吗?尝试输出到浏览器中的控制台日志以查看滚动被调用的时间以及是否获取其他语句。 – fanfavorite

+0

是的,他们在默认情况下是不透明的。当我向下滚动时,它变为#101010,但是当我向上滚动时,什么都没有发生。我不认为其他人在工作。 – derrtyones

+0

你确认了吗? scrollTop要么在90以上,要么根本不触碰滚动功能。如果您创建一个fiddleJS示例,那么可以更容易地看出您可能会做错什么。 – fanfavorite

回答

0

好吧我经过很多次尝试后自己解决了。首先我使用了“else if”语句。

if($(this).scrollTop() > 89){ 
    //change backgrounds here 
}else if($(this).scrollTop() < 90){ 
    //change backgrounds back 
} 

它然后工作,但有一个很大的延迟。经过一番谷歌搜索我发现它被称为几次第二,所以我解决了使用stop()函数:

$(".top").stop().animate({"background-color":"rgba(16, 16, 16, 0.8)"},'slow');