滚动时更改固定图像

Question

当我滚动 3 个特定的行时，我试图进行固定的图像更改。该图像是一部手机，其界面应与普通文本匹配，当我滚动看到新文本时，手机界面应相应更改！

我设法修改了我在另一个线程中找到的一个 JSFiddle，以使用一些文本 Div 来解决问题，但我无法在我的网站上实现它，因为我的网站以 URL 为源的图像。

这是 JSFiddle：http://jsfiddle.net/dB7eF/25/

这是在 JSFiddle 中接缝的 JS：

$("#image1").fadeIn(1000);
$(document).scroll(function() {
  var pos = $(document).scrollTop();
  if (pos < 200) {
    hideAll("image1");
    $("#image1").fadeIn(1000);
  }
  if (pos > 200 && pos < 600) {
    hideAll("image2");
    $("#image2").fadeIn(1000);
  }
    if (pos > 600 && pos < 1000) {
    hideAll("image3");
    $("#image3").fadeIn(1000);
  }
});

function hideAll(exceptMe) {
  $(".image").each(function(i) {
    if ($(this).attr("id") == exceptMe) return;
    $(this).fadeOut();
  });
}

该站点是使用 Visual Composer 构建的，因此我希望图像的来源是 URL，而不是 JSFiddle 示例中的 ID！

Answer 1

我更新了 js fiddle 并添加了带有源的图像标签，在 div 标签中添加了一个图像标签

<div id="c3" class="left"><img src="https://dummyimage.com/300x200/000/fff" style="width:100px"/></div>

http://jsfiddle.net/dB7eF/26/

这是你要的吗？