基于滚动条位置的Div不透明度

Question

查找当滚动条到达某个位置here时如何淡出div的示例。但它不是一个平滑的节流式淡入淡出。下面是该jsfiddle的代码：

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

我希望不透明度百分比来反映滚动条的位置。例如，当滚动条处于最高位置时，div不透明度为100％。当我向下滚动35px时，我希望div的不透明度淡入0％

也许一种技术可能是当div A在顶部35px处，div B = 100％不透明度。当div A从顶部0px时，div B = 0％不透明度。并在它们之间的所有阶段平稳淡化。

谢谢！

更新：感谢所有帮助他们大多数工作相当好，但我真的需要它在35px范围内工作。所以我创建了一个新的例子，它将清楚地说明它应该如何工作。
http://jsfiddle.net/J8XaX/1/

更新2：移动设备：我试图在我的iPhone和淡入淡出效果不理想。它的工作方式是，如果您中途滑动并松开手指，则不透明度会降低。但如果您尝试平滑滚动，则会从100％不透明度直接变为0％不透明度。想知道是否有什么办法解决这个问题？

谢谢！

Answer 1

尝试像

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

时scrollTop的达到35px随后的div的不透明度为1 - 35/35 = 0

例如小提琴：http://jsfiddle.net/wSkmL/1/
您的提琴更新：http://jsfiddle.net/J8XaX/2/（我已经改变了35 130px实现效果你写在橙色格）

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()：滚动区域
$(document).scrollTop()：当前滚动位置
percent：以百分比
divs.css('opacity', 1 - percent);当前滚动位置：设置的div

的不透明度也可参见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

编辑：哇这么多答案打败了我，而我是张贴

编辑：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