title: Change fixed image when scrolling
body: <p>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!</p>
  
  <p>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.</p>
  
  <p>Here's the JSFiddle: <a href="http://jsfiddle.net/dB7eF/25/" rel="nofollow noreferrer">http://jsfiddle.net/dB7eF/25/</a></p>
  
  <p>Here's the JS that seams to do the trick in JSFiddle:</p>
  
  <pre><code>$("#image1").fadeIn(1000);
  $(document).scroll(function() {
    var pos = $(document).scrollTop();
    if (pos &lt; 200) {
      hideAll("image1");
      $("#image1").fadeIn(1000);
    }
    if (pos &gt; 200 &amp;&amp; pos &lt; 600) {
      hideAll("image2");
      $("#image2").fadeIn(1000);
    }
      if (pos &gt; 600 &amp;&amp; pos &lt; 1000) {
      hideAll("image3");
      $("#image3").fadeIn(1000);
    }
  });
  
  function hideAll(exceptMe) {
    $(".image").each(function(i) {
      if ($(this).attr("id") == exceptMe) return;
      $(this).fadeOut();
    });
  }
  </code></pre>
  
  <p>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!</p>