Javascript 一种基于滚动触发背景图像的更好方法

我试图创建一个水平滚动条，当滚动一个div的背景图像将改变

div有一个带有空闲gif的字符，当滚动时，gif应更改为循环gif

我有半工作的概念，但我改变背景的滚动方法并不可靠

var isScrolling = false;
console.log(isScrolling);

//changing the background od character based on scroll
function playAnimation() {
var Character = document.getElementById("character");
if (isScrolling == true) {
    Character.style.backgroundImage = 
"url(/images/gif/sqeekiWalk.gif)";
} else {
    Character.style.backgroundImage = 
"url(/images/gif/sqeekiIdle.gif)";
}
}

window.onmousewheel = playAnimation;

//Checking if the user is scrolling
(function( $ ) {
$(function() {
    var $output = $( "#output" ),
        scrolling = "<span id='scrolling'>Scrolling</span>" ,
        stopped = "<span id='stopped'>Stopped</span>"; 
        $( window ).scroll(function() {
            $output.html( scrolling );
            isScrolling = true;
            clearTimeout( $.data( this, "scrollCheck" ) );
            $.data( this, "scrollCheck", setTimeout(function() {
                isScrolling = false;
                $output.html( stopped );
            }, 250) );

        });
});
})( jQuery );

var isScrolling=假；
控制台日志（ISCrolling）；
//基于滚动更改背景od字符
函数playAnimation（）{
var Character=document.getElementById（“字符”）；
如果（isScrolling==真）{
Character.style.backgroundImage=
“url（/images/gif/sqeekiWalk.gif）”；
}否则{
Character.style.backgroundImage=
“url（/images/gif/sqeekiIdle.gif）”；
}
}
window.onmouseheel=播放动画；
//检查用户是否正在滚动
（函数（$）{
$（函数（）{
变量$output=$（“#output”），
滚动=“滚动”，
stopped=“stopped”；
$（窗口）。滚动（函数（）{
$output.html（滚动）；
isScrolling=true；
clearTimeout（$.data（这是“滚动检查”）；
$.data（此“滚动检查”，setTimeout（函数（）{
IsCrolling=假；
$output.html（已停止）；
}, 250) );
});
});
})（jQuery）；

---

我希望图像在滚动状态下会改变，但只会在滚动部分的末尾改变。

欢迎来到SO@Luke。我建议，除了JavaScript之外，还应该以代码片段的形式包含HTML和CSS，这样我们可以提供帮助。欢迎来到so@Luke。我建议，除了JavaScript之外，您还应该以代码片段的形式包含HTML和CSS，以便我们提供帮助。