0

所以我使用来自另一个问题的这段代码，带有 jquery UI 库

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

所有需要的CSS是

#about {background-color:#fff;}

这完美地工作，但我试图获得完全相同的效果，只是在另一个 div 上有不同的颜色。

所以我尝试复制和粘贴，并更改设置，但由于某种原因，每当页面加载时#contact 淡入，而不是当用户滚动到该点时。

我的 html 只是 100% 的宽度和高度堆叠的 div 彼此叠加。

谢谢你！

* JS小提琴*

http://jsfiddle.net/xZyzv/

4

2 回答 2

1

在您的脚本中包含 JQuery 文件，它将起作用。在您的 JSFIDDLE 中，只需将框架和扩展（左侧）从“无库（纯 js）”更改为“Jquery 1.6.4”并运行小提琴。

请参阅我的评论以了解为什么只有在快速滚动时才能看到褪色效果。

当您到达#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);
    }

    });
于 2013-07-06T06:10:08.880 回答
0

我在其他 div 中添加了相同的功能。也许应该调整滚动中的 200 值，以便只有当您靠近该 div 时它才会消失。

在这里提琴

$(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);
    });
于 2013-07-06T15:42:16.207 回答