JQuery Changing Content on Scroll Effect

How would you go about achieving the same effect as is shown on this site?开发者_如何学运维 When a specific post comes into the focus of the two blue circular things, data about that post is shown in both circle things. Are there any jQuery plugins made especially for this?

I know that they are using an overlay, I am wondering more about the switching of the content when a specific post is in the focus of the blue circles.

Thanks

This is simple. They have a blue background that is sync with the content. on top of that they added an overlay layer to cover that. It makes you feel the circles changes their content while scrolling. check this overlay image, you will get what's going there! :)

If you inspect the site using Firebug you will see that this is actually just a show/hide of spans when the a particular post is in view. Some simple calculation to determine the position of the element wrapping each post on the screen.

Something to the effect of :

<div class="post-wrapper">
    <span class="date"></span>
    <div class="post"></div>
    <span class="type"></span>
</div>

Calculate the position of post-wrapper

If it is at some position hide the <span>s in the previous post-wrapper and show the <span>s of the current post-wrapper

Along with some nifty CSS positioning of course.