Div opacità basata sulla posizione della barra di scorrimento

Question

Trova un esempio di come svanire un div quando la barra di scorrimento raggiunge una determinata posizione here. Ma non è una leggera dissolvenza di tipo acceleratore. Ecco il codice da quel jsfiddle:

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

voglio la percentuale di opacità per riflettere la posizione della barra di scorrimento. Ad esempio quando la barra di scorrimento si trova nella posizione più alta, l'opacità div è 100%. Quando faccio scorrere verso il basso di 35px voglio che l'opacità del div scenda a 0%

Forse una tecnica potrebbe essere quando div A è a 35px dall'alto, div B = 100% di opacità. Quando div A è 0px dall'alto, div B = 0% opacità. E farlo svanire dolcemente in tutte le fasi intermedie.

Grazie!

AGGIORNAMENTO: Grazie per tutto l'aiuto, la maggior parte di loro funziona abbastanza bene, ma ho davvero bisogno che funzioni all'interno della gamma 35px. Così ho creato un nuovo esempio che renderà molto chiaro come dovrebbe funzionare.
http://jsfiddle.net/J8XaX/1/

AGGIORNAMENTO 2: dispositivi mobili: l'ho provato sul mio iPhone e la dissolvenza non funziona correttamente. Il modo in cui funziona è se si fa scorrere a metà corsa e si rilascia il dito, quindi l'opacità diminuisce. Ma se provi a scorrere senza problemi, passa dal 100% di opacità direttamente allo 0% di opacità. Ti chiedi se c'è un modo per risolvere questo problema ??

Grazie !!

Answer 1

provare qualcosa di simile

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) }); 
    } 
}); 

quando scrollTop raggiunge 35px poi opacità del div è 1 - 35/35 = 0

esempio violino: http://jsfiddle.net/wSkmL/1/
vostro violino aggiornamento: http://jsfiddle.net/J8XaX/2/ (ho cambiato 35 a 130px per il raggiungimento degli effetto scritto nel div arancione)

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(): l'area di scorrimento
$(document).scrollTop(): la posizione di scorrimento corrente
percent: la posizione di scorrimento corrente in percentuale
divs.css('opacity', 1 - percent);: imposta l'opacità del div

anche vedere 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

edit: wow tanti risposta mi ha battuto mentre stavo postando

edit: 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