javascript - Change fixed image when scrolling -
i'm trying have fixed image change when scroll on 3 particular rows. image phone interface should match normal text, scroll new text seen , phones interface should change accordingly!
i managed modify jsfiddle found in thread trick text div's can't seam implement on site have images urls source.
here's jsfiddle: http://jsfiddle.net/db7ef/25/
here's js seams 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 built visual composer love sources images urls instead of ids in jsfiddle example!
i updated js fiddle , added image tags source, adding image tag within div tags
<div id="c3" class="left"><img src="https://dummyimage.com/300x200/000/fff" style="width:100px"/></div>
is asking for?
Comments
Post a Comment