Change fixed image when scrolling

问题:

I'm trying to have a fixed image change when i scroll over 3 particular rows. The image is a phone with an interface which should match up with normal text, as i scroll new text is seen and the phones interface should change accordingly!

I managed to modify a JSFiddle that I found in another thread to do the trick with some text Div's but I can't seam to implement it on my site which have images with URLs as source.

Here's the JSFiddle: http://jsfiddle.net/dB7eF/25/

Here's the JS that seams to do the trick in JSFiddle:

$("#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();
  });
}

The site is built with Visual Composer so I would love the sources for the Images to be URLs instead of IDs as in the JSFiddle example!

回答1:

I updated the js fiddle and added image tags with source, adding an image tag within the div tags

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

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

is this what you were asking for?