Cambio de imagen en posición del Scroll

[Guggel]

Buenas noches, he estado buscando MUCHO por internet y al final he llegado a una conclusión con este asunto que probablemente sea la más complicada pero era de la que más información había...
Crear un div y aplicarle a éste una clase que sea la que contenga la imagen y hacer un cambio de clase cuando el scroll está en una posición determinada. La intención es hacer un menú que cambie de imagen cuando el scroll llegue a esta posición y vuelva a cambiar cuando continúe hacia abajo.
CSS

Código:

div.ricki
{
   content:url(images/menu_08.gif);
}​
div.ricki
{
   content:url(images/menui_08.gif);
}​

JAVASCRIPT

Código:

onScrollHandler = function() {
  var rickowens = images/menu_08.gif.src;
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 100) {
     newImageUrl = "images/menui_08.gif"
  }
  if (scrollTop > 200) {
     newImageUrl = "img2.jpg"
  }
  if (scrollTop > 300) {
     newImageUrl = "img3.jpg"
  }
  yourImageElement.src = newImageUrl;
};
object.addEventListener ("scroll", onScrollHandler);

HTML

Código:

<td> 
         	<a href="#2"><img id="rickowens" src="images/menu_08.gif"></a> 
            </td>