滚动时主体背景颜色不会改变

Question

我在使用jQuery滚动时遇到了背景色过渡。

该代码从颜色1（白色）到颜色2（黑色），也从颜色2到颜色1向后工作。

http://codepen.io/wRancho/pen/Wxmgqx

但是，颜色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");
}});

谢谢！

Answer 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的工作版本

Answer 2

使用“ &&”代替“ ||” 在你的情况下