Morgan Hassel Morgan Hassel - 25 days ago 16
jQuery Question

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!

Answer

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?

Comments