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

Posted 2023-03-06

【中文标题】基于滚动条位置的 Div 不透明度

【英文标题】：Div opacity based on scrollbar position

【发布时间】：2012-04-29 12:47:51

【问题描述】：

找到一个示例，说明如何在滚动条到达特定位置 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% 不透明度。想知道有没有办法解决这个问题？？

谢谢！！

【参考方案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 中写的效果）

【讨论】：

试过了，没用，但你有我需要的概念。向下滚动 35px 应该使 div 淡出。我创造了一个新的小提琴，也许试一试？

【参考方案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。

【讨论】：

谢谢，它工作得非常流畅，但我需要它在 35px 的限制内工作。请看我的新例子。感谢您的帮助！

【参考方案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

【讨论】：

干得好，但我需要它在 35px 限制内工作。请检查我的新示例。谢谢！

【参考方案4】：

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

【讨论】：

也可以，但是需要 35px 的限制。请查看我的新示例。谢谢！