Morphing content based on window part focus

Question

What I'm trying to achieve is basically have a code that will morph ( move around the page ) based on the part of the window which is currently viewed.

Scenario : - actual page height : 2000px - actual screen height( pc, laptop whatever ) : 800px - 1 image of 600px - 3 div's or virtual boxes ( just to prove what I want to do )

Workflow

When you open the page, you'd see the first part of the page with the image loaded in the first div. What I want and need to achieve is when scrolling the page, and the focus would be on the second div ( or the image simply gets out of focus - you can't see it no more ), the image would move ( disappear from the first box ) and appear in the second one, which is currently visible.

The idea might seem pretty easy but I'm not Javascript savvy. Ideally, the answer should include a way to load a Javascript instead of that image.

Answer 1

The way you use the word focus can be misleading, as focus is a JS event that happens after an element is clicked. You need to get familiar with the jQuery scroll event and scrollTop. Here is similar Thread here in StackOverflow that you may want to read http://stackoverflow.com/questions/2230880/