how to achieve the above effect?
this effect occurs when scrolling from the home page to the div location of ul1-left-features. The div is divided into two columns, and the left side is divided into three blocks.
when scrolling to item1, the default image of the first picture scrolls down, such as 20px
when scrolling to item2, the picture is changed to the picture of the corresponding itme2
when scrolling to item3, the picture is changed to the picture of the corresponding itme3

when the picture on the right scrolls down, it also moves down, and the height of the movement should be proportional.

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

I wrote a test that was successful, but still could not achieve this effect:

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

now there are the following questions:

1. how can I tell that the scroll bar is actually scrolling to the item1 position?
2. how do I change pictures?
3. how to move the picture down?

Thank you who can help me. Can you give me some ideas? Preferably demo.