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

Question

我正在尝试创建一个水平滚动条，当滚动时，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 );

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