根据滚动位置更改图像[关闭]答案

【问题标题】：change image based on scroll position [closed]根据滚动位置更改图像[关闭]
【发布时间】：2015-11-01 13:36:44
【问题描述】：

我需要一些关于我的 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>

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

【问题讨论】：

HTML 丢失...请描述您已有的内容无法正常工作的原因。

标签： javascript jquery html css

【解决方案1】：

这里有一些你可以使用的代码

    $(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

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

最后在这个函数中创建另一个变量来跟踪使用 $(window).scrollTop() 滚动的像素。

如果窗口滚动大于容器高度的一半大小，则将 img src 属性更改为另一个图像。

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

https://jsfiddle.net/PatoSalazarC/72pg342w/3/

【讨论】：