Morgan Hassel Morgan Hassel - 4 months ago 35
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:

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

$(document).scroll(function() {
var pos = $(document).scrollTop();
if (pos < 200) {
if (pos > 200 && pos < 600) {
if (pos > 600 && pos < 1000) {

function hideAll(exceptMe) {
$(".image").each(function(i) {
if ($(this).attr("id") == exceptMe) return;

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!


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="" style="width:100px"/></div>

is this what you were asking for?