jquery动画滚动背景色（多个div）

因此，我使用另一个问题的代码，jQueryUI库

$(window).scroll(function() {
    $("#about").stop().animate({
       backgroundColor: $(window).scrollTop() > 200 ? '#000' : '#fff',
    }, 1000);
});

所有css都需要

#about {background-color:#fff;}

这是完美的作品，但我试图有完全相同的效果，只是在另一个div不同的颜色

因此，我尝试了复制和粘贴，并更改了设置，但由于某些原因，无论何时加载页面，联系人都会淡入，而不是当用户滚动到某个点时

我的html只有100%的宽度和高度堆叠在彼此的顶部

谢谢大家!

*JS小提琴*

---

将JQuery文件包括在脚本中，它将起作用。在JSFIDLE中，只需将框架和扩展左侧从No LibraryPure js更改为JQuery1.6.4，然后运行FIDLE

查看我的评论，了解为什么只有在快速滚动时才能看到褪色效果

当您到达contact div时，可以使用此javascript查看淡入效果

 $(window).scroll(function() {
        $("#about").stop().animate({
          backgroundColor: $(window).scrollTop() > 200 ? '#000' : '#fff',
        }, 1000);
    if($(window).scrollTop() > 500){
    $("#contact").stop().animate({
          backgroundColor: $(window).scrollTop() > 500 ? '#fff' : '#000',
        }, 1000);
    }

    });

---

我向其他div添加了相同的函数。也许应该调整卷轴中的值200，这样只有当您靠近该div时才会褪色

---

你能提供HTML、CSS和你使用的任何其他JavaScript/jQuery吗？你能放一个JSFIDLE吗？请单击编辑并添加不起作用的代码。另外请注意，在编辑问题代码时，应该将其缩进四个空格，或者选择它并按下{}按钮，不要使用>来创建块引号。我已经提供了JSFIDLE。谢谢您的帮助，about是淡入状态，但不是contact div如果我慢慢向下滚动页面并让about淡入，然后继续滚动它不工作。但是如果我向下滚动的速度真的很快，它会在你开始滚动时立即工作，联系人上的动画功能会被触发，并在1秒内自动完成。因此，当您快速滚动并在1秒内到达contact div时，您可以看到淡入淡出的效果。当u r滚动变慢时，在你到达contact div.啊，我明白了，褪色效果就完成了。所以about工作得很完美，但是当您到达div时，是否有任何方法可以使联系人淡出，而不是当页面开始滚动时？我是jquery新手，我已经给出了代码，请查看答案。当你接近接触点时，使用该代码可以看到褪色。这怎么可能？更改200，使其仅在靠近div时褪色？抱歉，jqueryI的全新功能意味着当滚动条离不同的div更近时，它们可以有动画。在上面的示例中，所有动画都从scroll 200开始，但请看以下内容：谢谢，有没有办法将其设置为百分比而不是像素？像contact是从顶部300%定位的，那么有没有一种方法可以代替使用500像素来使用300%？是的，你只需要计算多少是以%为单位的。但是500%比身高高，你是说50%还是？请点击此处：

$(window).scroll(function() {
        $("#home").stop().animate({
          backgroundColor: $(window).scrollTop() > 200 ? '#00f' : '#fff',
        }, 1000);
    });
$(window).scroll(function() {
        $("#about").stop().animate({
          backgroundColor: $(window).scrollTop() > 200 ? '#0f0' : '#fff',
        }, 1000);
    });

$(window).scroll(function() {
        $("#contact").stop().animate({
          backgroundColor: $(window).scrollTop() > 200 ? '#0ff' : '#f00',
        }, 1000);
    });