滚动时更改固定图像

Question

我试图在滚动 3 个特定行时更改固定图像。该图像是一个 phone，其界面应与普通文本匹配，当我滚动时会看到新文本，并且 phones 界面应相应更改！

我设法修改了我在另一个线程中找到的一个 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/

这是你要的吗？

滚动时更改固定图像

Change fixed image when scrolling

javascript

wordpress

jquery

visual-composer