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

Question

Aquí es el jsFiddle: http://jsfiddle.net/NKgG9/

básicamente estoy queriendo esas cajas rosadas ser en el programa de carga de la página de forma normal, pero tan pronto como el usuario se desplaza hacia abajo la página que queremos que se desvanecen y desaparecen. Cuando el usuario se desplaza de vuelta a su posición o a la parte superior de la ventana del navegador, quiero que esos recuadros rosas vuelvan a fundirse. Soy inútil con JS, qué bueno que lo haga con algo de ayuda sobre cómo hacer esto.

Toda ayuda apreciada.

Answer 1

ejemplo muy sencillo: http://jsfiddle.net/a4FM9/2/

var divs = $('.social, .title'); 
$(window).scroll(function(){ 
    if($(window).scrollTop() <10){ 
     divs.stop(true,true).fadeIn("fast"); 
    } else { 
     divs.stop(true,true).fadeOut("fast"); 
    } 
});​ 

Answer 2

gusta esta? http://jsfiddle.net/NKgG9/6/

$(function(){ 
    var targets = $(".title, .social"); 
    if($(window).scrollTop() > 10){ 
     targets.hide(); 
    } 
    $(window).scroll(function(){ 
     var pos = $(window).scrollTop(); 
     if(pos > 10){ 
      targets.stop(true, true).fadeOut("fast"); 
     } else { 
      targets.stop(true, true).fadeIn("fast"); 
     } 
    }); 

}); 

La idea básica: suscribirse al evento de desplazamiento. Si la posición de desplazamiento se mueve más allá de cierto punto, inicie el fundido de salida e igualmente si el usuario se desplaza hacia arriba. Algunos detalles importantes: realice un seguimiento si ya se está desvaneciendo (se muestra la variable) y detenga el fundido continuo si comenzar un nuevo fundido.

Answer 3

Gracias - este realmente me ayudó.

Originalmente quería una solución como "Scroll for More" y logré hacerlo con http://jsfiddle.net/a4FM9/12/ - quizás esto es útil para cualquiera.