滚动时正文背景颜色不会改变答案

【问题标题】：Body background-color won't change while scrolling滚动时正文背景颜色不会改变
【发布时间】：2016-08-18 22:51:19
【问题描述】：

我在使用 jQuery 滚动时有这个主体背景颜色过渡。

代码从颜色 1（白色）到颜色 2（黑色），反之亦然，从颜色 2 到颜色 1。

但是，颜色 3 或颜色 4 不起作用，我尝试了对 if 语句的一些更改，但我无法弄清楚为什么它不能使用超过 2 种颜色。

body { height: 2400px; transition: background-color 1s ease-in; }


$(window).scroll(function() {    
var scroll = $(window).scrollTop();

if (scroll == 0 || scroll < 500) {
  $("body").css("background-color","white");
} 
else if (scroll >= 500 || scroll < 1000) {
  $("body").css("background-color","black");
} 
else if (scroll >= 1000 || scroll < 1500) {
  $("body").css("background-color","green");
}
else {
  $("body").css("background-color","white");
}});

谢谢！

【问题讨论】：

标签： jquery css scroll background-color

【解决方案1】：

您没有使用正确的比较运算符而不是 ||使用 &&

这是工作的 js 代码

    $(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll < 500) {
      $("body").css("background-color","white");
    } 
    else if (scroll >= 500 && scroll < 1000) {
      $("body").css("background-color","black");
    } 
    else if (scroll >= 1000 && scroll < 1500) {
      $("body").css("background-color","green");
    }
    else {
      $("body").css("background-color","white");
    }
});

这里是codepen wokring 版本

【讨论】：

谢谢！现在我觉得有点笨

【解决方案2】：

使用“&&”代替“||”在你的 if 条件下

【讨论】：