jQuery.scroll 滾動(dòng)控制更換圖片

上面的效果要怎么實(shí)現(xiàn)呢？
從首頁滾動(dòng)到 ul1-left-features 這個(gè)div位置時(shí)，會有這個(gè)效果，這個(gè)div中分兩列，左側(cè)又分三塊分別為item1,item2,item3.
當(dāng)滾動(dòng)到item1時(shí)，第一圖默認(rèn)圖向下滾動(dòng)比如20px
當(dāng)滾動(dòng)到item2時(shí)，圖片更換為對應(yīng)itme2的圖片
當(dāng)滾動(dòng)到item3時(shí)，圖片更換為對應(yīng)itme3的圖片

右側(cè)的圖片在向下滾動(dòng)時(shí)，它也會向下移動(dòng)，移動(dòng)的高度應(yīng)該是個(gè)比例。

<div class="ul1-features-list">
    <div class="ul1-left-features">
        <div class="item-one"></div>
        <div class="item-two"></div>
        <div class="item-three"></div>
    </div>
    <div class="lock">
        <img src="item1.png" />
    </div>
</div>

我寫了個(gè)測試,可以測試成功，但是還是實(shí)現(xiàn)不了這個(gè)效果：

$(function(){
    var offset = $('.item-one').offset().top;
    var fwidth = $('.item-one').height();
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        var scrollBtm = $(document).height() - $(window).scrollTop() - $('.item-one').height();
        if(offset < scrollTop){
                $('.lock').addClass('item1');
        }
    })
});

現(xiàn)在有以下幾個(gè)問題：

1. 怎么判斷滾動(dòng)條確實(shí)是滾動(dòng)到item1這個(gè)位置了？
2. 怎么更換圖片？
3. 怎么操作圖片向下移動(dòng)？

謝謝能給我?guī)椭娜?，可以給個(gè)思路嗎？最好是demo.