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

Div opacity based on scrollbar position

提问by user433575

Find an example of how to fade out a divwhen the scroll bar reaches a certain position here. But it's not a smooth throttle-type fade. Here is the code from that jsfiddle:

在此处查找div滚动条到达特定位置时如何淡出 a 的示例。但这不是一个平滑的油门式淡入淡出。这是来自该 jsfiddle 的代码：

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

I want the opacity percentage to to reflect the position of the scrollbar. For instance when the scroll bar is at very top position, the div opacity is 100%. When I scroll down 35px I want the opacity of the div to fade down to 0%

我希望不透明度百分比反映滚动条的位置。例如，当滚动条位于最顶部时，div 不透明度为 100%。当我向下滚动 35px 时，我希望 div 的不透明度下降到 0%

Perhaps a technique could be when div A is at 35px from top, div B = 100% opacity. When div A is 0px from top, div B = 0% opacity. And have it smoothly fade at all stages in between.

也许一种技术可能是当 div A 距离顶部 35px 时，div B = 100% 不透明度。当 div A 距离顶部 0px 时，div B = 0% 不透明度。并让它在中间的所有阶段平滑淡入淡出。

Thanks!

谢谢！

UPDATE: Thanks for all the help most of them work fairly well, but I really need it to work within the 35px range. So I have created a new example which will make it very clear how it should work.
http://jsfiddle.net/J8XaX/1/

更新：感谢所有的帮助，他们中的大多数工作得很好，但我真的需要它在 35px 范围内工作。因此，我创建了一个新示例，它将非常清楚它应该如何工作。
http://jsfiddle.net/J8XaX/1/

UPDATE 2: mobile devices: I tried this on my iPhone and the fade doesn't work smoothly. The way it works is if you slide halfway and release your finger, then the opacity goes down. But if you try to scroll smoothly it goes from 100% opacity directly to 0% opacity. Wondering if there is any way to fix this??

更新 2：移动设备：我在我的 iPhone 上试过这个，淡入淡出不顺利。它的工作方式是，如果您滑动到一半并松开手指，那么不透明度就会下降。但是，如果您尝试平滑滚动，它会直接从 100% 不透明度变为 0% 不透明度。想知道有没有办法解决这个问题？？

Thanks!!

谢谢！！

回答by Fabrizio Calderan

try something like

尝试类似

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

when scrolltop reaches 35pxthen opacity of divs is 1 - 35/35 = 0

当 scrolltop 到达时35px，div 的不透明度是1 - 35/35 = 0

example fiddle: http://jsfiddle.net/wSkmL/1/
your fiddle updated: http://jsfiddle.net/J8XaX/2/(I've changed 35 to 130px to achieve the effect you wrote in the orange div)

示例小提琴：http: //jsfiddle.net/wSkmL/1/
您的小提琴更新：http: //jsfiddle.net/J8XaX/2/（我已将 35 更改为 130px 以实现您在橙色 div 中编写的效果）

回答by scessor

var divs = $('.social, .title');
$(window).scroll(function(){
   var percent = $(document).scrollTop() / ($(document).height() - $(window).height());
   divs.css('opacity', 1 - percent);
});

$(document).height() - $(window).height(): the scrolling area
$(document).scrollTop(): the current scroll position
percent: the current scroll position in percent
divs.css('opacity', 1 - percent);: sets the opacity of the divs

$(document).height() - $(window).height(): 滚动区域
$(document).scrollTop(): 当前滚动位置
percent: 当前滚动位置百分比
divs.css('opacity', 1 - percent);: 设置 div 的不透明度

Also see this example.

另请参阅此示例。

回答by Ghokun

var divs = $('.social, .title');
$(window).scroll(function(){
    var fadeval = 1 - ($(window).scrollTop()) / ($(window).height());       
    divs.css({opacity: fadeval});
});?

Fiddle demo

小提琴演示

edit: wow so many answer beat me while I was posting

编辑：哇，当我发帖时，这么多答案打败了我

edit: 2

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

更新了 JsFiddle

回答by gion_13

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