Animate div up using jquery animate on scroll and div down on scroll up

Hey folks,

I am having issues with my jQuery and not sure what to do.

What I need to do it this:

Scroll down to a div
When user has reached the div location (.main div) and keep scrolling down
animate the div(image / box) to move up when scrolling down
if users scrolls window back up then animate the div back down
be able to do this with multiple divs
So this is how far I have got:

https://jsfiddle.net/gqj7dxdv/45/

I have been testing my jQuery and I can get it to move left by 50px and add a width of 50px but this is for testing I just want it to reach the top of the .main div - so this is just for testing.

I just want to move up on scroll down and move down on scroll up but not to go past the .main div.

Hope this makes sense and someone will be able to help!

Cheers.

Here is my jQuery

$(window).scroll(function(e) {
//Set up
var y = $(document).scrollTop();
var h = $(window).height(); 
var targetOne = $('.main');

if(y + h < targetOne.position().top + targetOne.outerHeight()){

    $('.funImg').animate({
        left: "+=50",   
    width:"+=50"
    }, 500);

}// End if
  });

Thanks for any help,

Ben :blush: