¿Cómo detectar cuándo se desplazó un elemento en la parte superior de una página en jquery?

Voy a crear una línea de tiempo para un sitio web, algo así como Google Timeline , tengo algunos divs con el nombre de años con un separator clases y cuando me desplacé hacia arriba y alcancé un div en la parte superior de la página el título del año en el lado izquierdo debe cambiarse a otro año.

Esta es mi estructura HTML (solo por ejemplo):

 

¿Cuál debería ser mi código jquery y qué funciones debería usar?

Aquí hay un violín muy básico sobre lo que puedes hacer: http://jsfiddle.net/atq0sh6y/

El código jQuery:

 $(document).scroll(function(){ $('.separator').each(function(){ var top = $(window).scrollTop(); var off = $(this).offset(); if(top>off.top) { $('.header').text($(this).data('year')); } }); }); 

Espero eso ayude.