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以达到你在橙色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的不透明度

另见this example。

Answer 3

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

Answer 4

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

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

4 个答案: