Moving absolutely positioned image according to container div's position in the browser window

I have a div with a relative position (div 1). It contains an image (shown as the green block) with an absolute position which by default is hidden way off to the left of the browser window.

I'd like to make it so that when div 1 is in the center of the browser window as the user scrolls down, the image is moved in slightly from the left and appears on the screen. As the user begins to scroll down past div 1, I'd like the image to move back to its original offscreen position.

I have attached a picture to try and make a bit more sense.

I have a feeling this is possible using JavaScript or jQuery but I'm not sure how. Any help would be greatly appreciated.

Ian开发者_如何学C

You'll want to bind a handler to the scroll event of the window, and measure the ratio of how far down the page the user has scrolled - then, position the image accordingly. I built a rough prototype; you should be able to tweak sizes and positions to make it work for you.

The JS for the prototype, which depends on the HTML and CSS in the JSFiddle linked above, is as follows:

var $main = $('.main');
var $tgt = $('.targetMover');
var origLeft = $tgt.position().left;
var maxLeft = 200;

$main.scroll(function(ev){
    var ratio = $main[0].scrollTop / $main[0].scrollHeight;
    var newLeft = origLeft + ( (maxLeft - origLeft) * ratio);
    $tgt.css({left:newLeft});
});

You would want to position the image on scroll. You would basically check what the position of the div is, set the top of the image to the same as the div, and set the left to whatever you like. you could use jquery animate for this to make it "move" to that position. You then would have to manage to do an scrollstop event (which doesn't exist), and hide the image again. See: http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ for scrollstop implementation (taken from the below post).

You might want to read through jQuery - fadeOut on Scroll / fadeIn on "scrollstop"