¿Cómo desvanezco un div in / out en el desplazamiento de la página?

Aquí está el jsfiddle:http: //jsfiddle.net/NKgG9

Básicamente, quiero que esas cajas rosadas se muestren en la carga de la página de manera normal, pero tan pronto como un usuario se desplace hacia abajo en la página, quiero que se desvanezcan y desaparezcan. Cuando el usuario retrocede a su posición o a la parte superior de la ventana del navegador, quiero que esos cuadros rosas vuelvan a desaparecer. Soy inútil con JS, así que ayuda con algo de ayuda para hacerlo.

Toda la ayuda apreciada.