我是 Javascript 和 Jquery 的初学者。我正在尝试实现背景图像在滚动文本上发生变化的效果。该代码适用于从上到下滚动，但一张图像在从下到上滚动时没有变化。这是我的代码，
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = $(window).scrollTop();
if(scrolledFromtop > fromTopPx && scrolledFromtop < 600) // distance to trigger second background image
{
$('html').addClass('scrolled');
}
else if(scrolledFromtop > 600 && scrolledFromtop < 1000) // distance to trigger third background image
{
$('html').addClass('scrolledtwo');
}
else{
$('html').removeClass('scrolled');
$('html').removeClass('scrolledtwo')
}
});
</script>
<style>
html {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html {
background-image:url(assets/images/b1.jpeg);
}
html.scrolled {
background-image:url(assets/images/ab3.jpeg);
}
html.scrolledtwo {
background-image:url(assets/images/ab9.jpeg);
}
</style>
</head>
我错过了什么？
最佳答案
你必须这样尝试，在 scroll 期间添加的 classes 也可能需要在某些情况下被删除，如下所示，
$(window).scroll(function() {
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = $(window).scrollTop();
if (scrolledFromtop > fromTopPx && scrolledFromtop <= 600) // distance to trigger second background image
{
$('html').addClass('scrolled');
$('html').removeClass('scrolledtwo');
} else if (scrolledFromtop >= 601 && scrolledFromtop < 1000) // distance to trigger third background image
{
$('html').addClass('scrolledtwo');
$('html').removeClass('scrolled');
} else {
$('html').removeClass('scrolled');
$('html').removeClass('scrolledtwo')
}
});html {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
height: 1200px;
}
html {
background-image: url("http://placehold.it/350x150/111/fff");
}
html.scrolled {
background-image: url("http://placehold.it/350x150/f11/fff");
}
html.scrolledtwo {
background-image: url("http://placehold.it/350x150/f2f/fff");
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>当 scrollTop 在 200 到 600 之间时删除 .scrolledtwo 类，当它在 601 到 1000 之间时以同样的方式删除 .scrolled else if它越过条件删除两者。
关于javascript - 向上滚动时背景图像不变，但向下滚动时工作正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44178364/