Javascript 根据滚动位置更改图像

我需要一些关于javascript和/或jquery的帮助。我是一名设计师，我正在尝试创造一些很酷的动画效果。具体来说，基于滚动位置，我想更改一个图像。我正在处理的html：

javascript：

<script type="text/javascript">
var yPos;
function yScroll(){
yPos = window.pageYOffset;
if(yPos < 20){
    $("#phone").attr("src", "assets/img/phone-right.png");
    } if(yPos < 40) {
      $("#phone").attr("src", "assets/img/phone-front.png");
    } if(yPos > 41){
      $("#phone").attr("src", "assets/img/phone-left.png");
    }
window.addEventListener("scroll", yScroll);}
</script>

var-yPos；
函数yScroll（）{
yPos=window.pageYOffset；
如果（yPos<20）{
$（“#phone”）.attr（“src”、“assets/img/phone right.png”）；
}如果（yPos<40）{
$（“#phone”）.attr（“src”、“assets/img/phone front.png”）；
}如果（yPos>41）{
$（“#phone”）.attr（“src”、“assets/img/phone left.png”）；
}
window.addEventListener（“滚动”，yScroll）；}

---

再一次，我是一名设计师，希望通过javascript和/或jquery实现一些很酷的效果。有人能帮忙吗？

以下是一些您可以使用的代码

    $(document).ready(function(){

    var containerHeight = $('#container').height();

    $(window).scroll(function(){
       var scrollPosition = $(window).scrollTop();
        if (scrollPosition > (containerHeight / 2))
        {
            $('img').attr("src", "http://www.cosplay.com/i/costumes/200/313779.jpg");   
        }
        else if (scrollPosition < (containerHeight / 2))
        {
            $('img').attr("src", "http://www.unikgamer.com/characters/face/ryu-street-fighter-85.jpg"); 
        }

    }) // scroll function

})// end document

$（文档）.ready（函数（）{
var containerHeight=$（'#container'）.height（）；
$（窗口）。滚动（函数（）{
var scrollPosition=$（window.scrollTop（）；
如果（滚动位置>（容器高度/2））
{
$（'img'）.attr（“src”http://www.cosplay.com/i/costumes/200/313779.jpg");   
}
否则如果（滚动位置<（容器高度/2））
{
$（'img'）.attr（“src”http://www.unikgamer.com/characters/face/ryu-street-fighter-85.jpg"); 
}
})//滚动功能
})//结束文件

我所做的是创建一个大到可以滚动的容器并测试代码。然后使用.height（）我得到了容器的高度（1200px）。现在创建一个函数，该函数在窗口使用$（window.scroll（）滚动时被触发

最后，在此函数内创建另一个变量，该变量跟踪使用$（window）.scrollTop（）滚动的像素

如果窗口滚动大于容器高度的一半，请将img src属性更改为其他图像

如果窗口滚动小于容器高度的一半，则将img src属性更改为原始图像。这是小提琴。我希望这有帮助

---

缺少HTML。。。请描述一下你已经拥有的东西是如何不起作用的。