0

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!

Morgan Hassel
  • 23
  • 1
  • 8

1 Answers1

0

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?

ren.rocks
  • 772
  • 1
  • 7
  • 22
  • Wow thanks for the fast answer! Yes it did with some minor tweaking! With your help I remembered that I can create a "Raw HTML" item inside Visual Composer in which I could paste the HTML from JSFiddle from before! – Morgan Hassel Nov 08 '16 at 14:38
  • BTW is there any way to use percentage instead of pixels? I've been designing on my laptop until now and now when I'm on my 1440p desktop screen the transition is totally off @rtrigoso – Morgan Hassel Nov 10 '16 at 20:58