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

右側(cè)的圖片在向下滾動時，它也會向下移動，移動的高度應該是個比例。

<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>

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

$(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)在有以下幾個問題：

1. 怎么判斷滾動條確實是滾動到item1這個位置了？
2. 怎么更換圖片？
3. 怎么操作圖片向下移動？

謝謝能給我?guī)椭娜耍梢越o個思路嗎？最好是demo.