Body background-color 滚动时不会改变
Body background-color won't change while scrolling
我在使用 jQuery 滚动时有此 body background-color 过渡。
代码从颜色 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");
}});
谢谢!
您没有使用正确的比较运算符而不是 ||使用 &&
这是有效的 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 版本
使用“&&”代替“||”在你的 if 条件下
我在使用 jQuery 滚动时有此 body background-color 过渡。
代码从颜色 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");
}});
谢谢!
您没有使用正确的比较运算符而不是 ||使用 &&
这是有效的 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 版本
使用“&&”代替“||”在你的 if 条件下