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

Question

找到如何淡出的例子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来实现你在橙色div中写的效果)

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的不透明度

另请参见此示例.