Opacidad Div basada en la posición de la barra de desplazamiento

Question

Encuentre un ejemplo de cómo desvanecer un div cuando la barra de desplazamiento alcanza una posición determinada here. Pero no es un desvanecimiento suave del tipo de acelerador. Aquí está el código de ese jsFiddle:

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

Quiero que el porcentaje de opacidad a fin de reflejar la posición de la barra de desplazamiento. Por ejemplo, cuando la barra de desplazamiento está en la posición más alta, la opacidad de div es 100%. Cuando me desplazo hacia abajo 35px quiero que la opacidad del div se desvanezca a 0%

Quizás una técnica podría ser cuando div A está a 35px desde arriba, div B = 100% de opacidad. Cuando div A es 0px desde arriba, div B = 0% de opacidad. Y se desvanece suavemente en todas las etapas intermedias.

Gracias!

ACTUALIZACIÓN: Gracias por toda la ayuda, la mayoría de ellos funcionan bastante bien, pero realmente necesito que funcione dentro del rango de 35px. Así que he creado un nuevo ejemplo que dejará muy claro cómo debería funcionar.
http://jsfiddle.net/J8XaX/1/

ACTUALIZACIÓN 2: dispositivos móviles: Probé esto en mi iPhone y el fundido no funciona sin problemas. La forma en que funciona es si se desliza hasta la mitad y suelta el dedo, entonces la opacidad disminuye. Pero si intenta desplazarse sin problemas, pasa del 100% de opacidad directamente al 0% de opacidad. ¿Se pregunta si hay alguna manera de arreglar esto?

Gracias!

Answer 1

intentar algo así como

var divs = $('.social, .title'), 
    limit = 35; /* scrolltop value when opacity should be 0 */ 

$(window).on('scroll', function() { 
    var st = $(this).scrollTop(); 

    /* avoid unnecessary call to jQuery function */ 
    if (st <= limit) { 
     divs.css({ 'opacity' : (1 - st/limit) }); 
    } 
}); 

cuando llega scrollTop 35px continuación opacidad de divs es 1 - 35/35 = 0

ejemplo violín: http://jsfiddle.net/wSkmL/1/
su violín actualización: http://jsfiddle.net/J8XaX/2/ (He cambiado de 35 a 130px para lograr el efecto que escribió en el div naranja)

Answer 2

var divs = $('.social, .title'); 
$(window).scroll(function(){ 
    var percent = $(document).scrollTop()/($(document).height() - $(window).height()); 
    divs.css('opacity', 1 - percent); 
}); 

$(document).height() - $(window).height(): el área de desplazamiento
$(document).scrollTop(): la posición de desplazamiento actual
percent: la posición de desplazamiento actual en porcentaje
divs.css('opacity', 1 - percent);: establece la opacidad de la divs

Véase también this example.

Answer 3

var divs = $('.social, .title'); 
$(window).scroll(function(){ 
    var p = $(window).scrollTop()/ $(window).height(); 
    divs.stop().fadeTo("fast",p); 
}); 

Answer 4

var divs = $('.social, .title'); 
$(window).scroll(function(){ 
    var fadeval = 1 - ($(window).scrollTop())/($(window).height());  
    divs.css({opacity: fadeval}); 
});​ 

Fiddle demo

edición: wow tantos respuesta me golpearon mientras estaba publicando

edición: 2

var divs = $('.fademe'); 
$(document).ready(function(){divs.css('opacity', 0);}); //can be done using CSS also 
$(window).scroll(function(){ 

    var percent = $(document).scrollTop()/(35); 
    divs.css('opacity', percent);  
});​ 

Updated JsFiddle