基于滚动条位置的Div不透明度
找到滚动条到达某个位置时如何淡出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％不透明度。 想知道是否有办法解决这个问题？
谢谢！！
尝试类似的东西
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中写的效果）
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的不透明度
另见本例 。
var divs = $('.social, .title'); $(window).scroll(function(){ var fadeval = 1 - ($(window).scrollTop()) / ($(window).height()); divs.css({opacity: fadeval}); });
小提琴演示
编辑：哇这么多回答在我发帖时打败了我
编辑：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); });
更新了JsFiddle
var divs = $('.social, .title'); $(window).scroll(function(){ var p = $(window).scrollTop()/ $(window).height(); divs.stop().fadeTo("fast",p); });