基于滚动条位置的Div不透明度 [英] Div opacity based on scrollbar position

问题描述

查找滚动条到达某个位置时如何淡出 div 的示例这里。但这不是一个平滑的节流型褪色。以下是来自jsfiddle的代码：

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

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

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

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 A距离顶部35px时，div B = 100％不透明度。当div A从顶部开始为0px时，div B = 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.

谢谢！

更新：感谢所有帮助他们中的大多数工作得相当好，但我真的需要它在35px范围内工作。所以我创建了一个新的例子，它将非常清楚它应该如何工作。

http://jsfiddle.net/J8XaX/1/

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/

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

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??

谢谢!!

推荐答案

尝试类似

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

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

示例小提琴： http://jsfiddle.net/wSkmL/1/

你的小提琴更新： http://jsfiddle.net/J8XaX/2/ （我已经改变了35到130px来实现你在橙色div中写的效果）

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)

这篇关于基于滚动条位置的Div不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！