Using waypoints plugin to fade elements into and out of viewport on scroll

I've been a little stuck on the following issue for some time. Essentially I have vertically stacked DIVs, all of the same characteristics and CSS class (.vert-container).

• On scroll down, opacity of the top view-able DIV reduced as it leaves the top of the viewport.
• On scroll down, opacity of the bottom view-able DIV increased as it enters the viewport.

This effect of the top DIV fading out and the last fading in to continue for all of these DIVs.

I have been trying to achieve this with a combination of the jQuery waypoints plugin and fading opacity.

Anyone who can help me, it would be greatly appreciated. I will post my very incomplete code so far for the sake of a starting point.

$(document).ready(function(){
$('.vert-container .inner').waypoint({
  handler: function() { 
    $('.vert-container .inner').stop().animate({ "opacity": 0.2 }); // Fade out the DIV that is leaving viewport
  },
  offset: '50%'
});
});