根据DOM元素距离顶部高度判断改变src

[qq_41730597]

大概需求就是 我想页面滚动到 1图片 距离顶部0的时候 更换1图片的src 滚动到2的时候更换2的src 然后1的src变回去。自己写了一下 还是不会 请教大神
<div>
<img src="1.jpg" alt="" class=“title”>
<img src="2.jpg" alt="" class=“title”>
<img src="3.jpg" alt="" class=“title”>
<img src="4.jpg" alt="" class=“title”>
</div>


<script>
$(window).scroll(function(){
var title = $(".title");
for(var i=0;i<title.length;i++ ){
var windowTop = $(window).scrollTop()
if(windowTop>=title[i].offsetTop && windowTop<=title[i+1].offsetTop){
console.log(i)
}
}
})
</script>

[天际的海浪]

<div> <img src="1.jpg" alt="" class="title"> <img src="2.jpg" alt="" class="title"> <img src="3.jpg" alt="" class="title"> <img src="4.jpg" alt="" class="title"> </div> <script> $(window).scroll(function(){ var title = $(".title"); for(var i=0;i<title.length;i++ ){ var windowTop = $(window).scrollTop(); if(windowTop<=title.eq(i).offset().top){ console.log(i); break; } } }) </script>