スクロール時に固定画像を変更する

Question

3つの特定の行をスクロールするときに固定画像を変更しようとしています。イメージは、通常のテキストと一致するはずのインターフェイスを備えた電話です。新しいテキストが表示され、電話インターフェイスがそれに応じて変更される必要があります。

別のスレッドで見つかったJSFiddleを修正して、テキストDivでトリックを行うことができましたが、ソースとしてURLを持つイメージを持つ自分のサイトに実装することはできません。ここで

は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(); 
    }); 
} 

サイトは、Visual Composerで構築されています。http://jsfiddle.net/dB7eF/25/

はここJSFiddleでトリックを行うには縫い目があることJSですJSFiddleの例のようにIDではなくURLを使用してください。

Answer 1

私は、ソースをdivタグ内の画像タグを追加する

<div id="c3" class="left"><img src="https://dummyimage.com/300x200/000/fff" style="width:100px"/></div> 

http://jsfiddle.net/dB7eF/26/

をJSのフィドルと追加イメージタグを更新し、あなたが求めていたもの、このですか？